Pestañas CSS redondeadas

Question

He creado algunas pestañas de navegación redondeadas usando CSS y tengo problemas al implementarlas. hover.

En primer lugar aquí hay un enlace al sitio. Pestañas ya que es bastante difícil de explicar.Por favor, pase el cursor sobre el lado izquierdo de las pestañas para comprender mi problema.Lo he explicado a continuación.

Tengo una imagen de fondo configurada #navigation li elementos, esto contiene la esquina del lado izquierdo y luego tengo una segunda imagen de fondo (la esquina derecha) que se configura usando #navigation a.

Sin embargo, cuando coloco el cursor sobre el lado izquierdo de la pestaña, solo se muestra una pequeña parte del fondo, supongo que esto se debe a que solo se está colocando el cursor sobre el área li.Obviamente, me gustaría que toda la pestaña se resalte como lo hace cuando pasas el cursor sobre el resto.

Esto fue bastante difícil de explicar, así que si necesita hacerme más preguntas para comprender el problema, hágalo.

Answer 1

Un par de cosas:

Solucione el problema quitando el relleno del <li> y volviéndolo a colocar en el <a> secundario; el espacio que ocupan debe ser el mismo para que los elementos flotantes se alineen.

Ahora tienes un problema diferente, la esquina izquierda no se muestra.Solucione este problema haciendo que el color de fondo del a y a:hover igual a transparent en lugar de los colores, ahora el <li> puede verse.

Finalmente, le sugiero que cambie el comportamiento de ser otra imagen completamente a la misma imagen con una posición de fondo diferente, para que el rollover se cargue de manera invisible.

editar:Se describe el rollover de CSS sin intercambio de imágenes. aquí

Answer 2

¡Con jQuery es súper fácil! pero incluso puedes probar el cuadro escalable:

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

y luego cambie la imagen de fondo al pasar el cursor.

Answer 3

O puede reemplazar su li: hover y a: hover con estos:

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

Tenga en cuenta que puede no funcionar IE6.