Onglets CSS arrondis

Question

J'ai créé des onglets de navigation arrondis à l'aide de CSS et j'ai des problèmes pour implémenter n hover.

Tout d'abord, voici un lien vers le site Onglets , car il est assez difficile à expliquer. Survolez le côté gauche des onglets pour comprendre mon problème. J'ai expliqué ci-dessous.

J'ai une image d'arrière-plan définie sur #navigation li des éléments contenant le coin gauche et une deuxième image d'arrière-plan (le coin droit), définie à l'aide de #navigation a.

Cependant, lorsque je survole le côté gauche de l'onglet, seul un petit fond est affiché, je suppose que c'est parce que seule la zone li est survolée. Évidemment, j'aimerais que l'onglet entier soit mis en surbrillance, comme c'est le cas lorsque vous survolez le reste.

C'était assez difficile à expliquer, donc si vous avez besoin de me questionner davantage pour comprendre le problème, n'hésitez pas.

Answer 1

Quelques choses:

Corrigez le problème en supprimant le remplissage du < li > et le remettre sur l'enfant < un > - L’espace qu’ils occupent doit être identique pour que les survols soient alignés.

Maintenant, vous avez un problème différent, le coin gauche ne s’affiche pas. Corrigez ce problème en faisant en sorte que la couleur d'arrière-plan de a et a:hover soit égale à transparent au lieu des couleurs - maintenant, le & Lt; li & Gt; peut montrer à travers.

Enfin, je vous suggère de modifier complètement le comportement de l'image en la transformant en une même image avec une position d'arrière-plan différente, afin que le survol se charge de manière invisible.

modifier: la substitution de flux css sans permutation d'image est décrite dans ici

Answer 2

Avec jQuery c'est super facile! mais vous pouvez même essayer une boîte évolutive:

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

puis modifiez l'image de fond en survol.

Answer 3

Ou vous pouvez remplacer votre li: hover et un: hover par ceux-ci:

#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;
}

Notez que cela peut ne pas fonctionner avec IE6.