tabs CSS arredondados

Question

Eu criei algumas guias de navegação arredondados usando CSS e estou tendo problemas quando hover implementingn.

Em primeiro lugar aqui é um link para o site Tabs como bastante é dificil de explicar. Por favor, passe o mouse sobre o lado esquerdo das guias para entender o meu problema. Tenho explicado abaixo.

Eu tenho um conjunto imagem de fundo em itens #navigation li este contém o canto do lado esquerdo e eu, então, uma segunda imagem de fundo (canto direito) isso é definido utilizando #navigation a.

No entanto, quando eu passar o mouse sobre o lado esquerdo da guia, apenas um pequeno pedaço de fundo é mostrado, presumo isso é porque apenas a área de li está sendo pairado sobre. Obviamente, eu gostaria todo o guia de destaque como faz quando você passa o mouse sobre o resto.

Este foi bastante difícil de explicar isso, se você precisa me questionar ainda mais para entender o problema por favor.

Answer 1

Algumas coisas:

Corrigir o problema tomando o preenchimento fora do

e colocá-lo de volta no criança -. O espaço que ocupam precisa ser o mesmo para obter os paira para alinhar

Agora você tem um problema diferente, no canto esquerdo não mostra. Corrigir este, fazendo a cor de fundo para o a e a:hover igual a transparent em vez das cores -. Agora o

pode mostrar através

Finalmente, eu sugiro que você alterar o comportamento de ser outra imagem totalmente, para a mesma imagem com um background-position diferente, então as cargas de rolagem invisível.

edit: rollover css sem troca de imagem descrito aqui

Answer 2

Com jQuery é super fácil! mas você pode até tentar caixa escalável:

http: //www.usabilitypost.com/2008/11/27/scalable-content-box-using-only-one-background-image/

e, em seguida, mudar a imagem de fundo em foco.

Answer 3

Ou você pode substituir o seu li: hover e a: hover com estes:

#navigation li:hover {
        background: #009BDA url(images/tab_left_on.gif) no-repeat top left;
        cursor : pointer;
        }

#navigation li:hover a {
        background: #009BDA url(images/tab_right_on.gif) no-repeat top right;
        color: #FFF;
}

Note que não pode trabalhar IE6.