Schede CSS arrotondate

Question

Ho creato alcune schede di navigazione arrotondate usando CSS e ho problemi con l'implementazione di hover.

In primo luogo ecco un link al sito Tabs in quanto è abbastanza difficile da spiegare. Passa il mouse sopra il lato sinistro delle schede per capire il mio problema. Ho spiegato di seguito.

Ho impostato un'immagine di sfondo su #navigation li elementi che contengono l'angolo laterale sinistro e quindi ho una seconda immagine di sfondo (angolo destro) che viene impostata usando #navigation a.

Tuttavia, quando passo con il mouse sopra il lato sinistro della scheda, viene mostrato solo un piccolo pezzo di sfondo, presumo che ciò sia dovuto al fatto che solo l'area li viene passata sopra. Ovviamente vorrei che l'intera scheda venisse evidenziata come quando passa il mouse sopra il resto.

Questo è stato abbastanza difficile da spiegare, quindi se hai bisogno di interrogarmi ulteriormente per capire il problema, per favore, fallo.

Answer 1

Un paio di cose:

Risolvi il problema togliendo l'imbottitura da < li > e rimetterlo sul bambino < a > - lo spazio che occupano deve essere lo stesso per allineare i supporti.

Ora hai un problema diverso, l'angolo sinistro non mostra. Risolvilo rendendo il colore di sfondo per a e a:hover uguale a transparent invece dei colori - ora & Lt; li & Gt; può mostrare attraverso.

Infine, ti suggerisco di cambiare il comportamento dall'essere completamente un'altra immagine, alla stessa immagine con una diversa posizione di sfondo, quindi il rollover si carica in modo invisibile.

modifica: rollover css senza scambio di immagini descritto qui

Answer 2

Con jQuery è semplicissimo! ma puoi anche provare la casella scalabile:

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

, quindi cambia l'immagine di sfondo al passaggio del mouse.

Answer 3

Oppure puoi sostituire li: hover e a: hover con questi:

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

Nota che potrebbe non funzionare in IE6.