usarse - listas no ordenadas html

Problema de navegación en la lista HTML con un diseño desigual

Question

Nuestro diseñador creó una navegación que se ve así:

Barra de navegación

La estructura HTML de la cual es:

<ul>
    <li class="first">Home</li>
    <li>Schools</li>
    <li>Scores</li>
    <li>Sports</li>
    <li>Blogs</li>
    <li>Podcasts</li>
    <li class="last">Forums</li>
</ul>

No puedo entender si hay una manera de hacer esto para que cuando pase el mouse, digamos ''Deportes'', que la imagen de la flecha izquierda y derecha cambie los colores al rojo oscuro. ¿Hay alguna forma de hacer esto?

Este es mi CSS hasta ahora, pero solo cambia la flecha a la derecha del enlace:

#mainNav ul li{
    float: left;
    background-color: #ed1c24;
    padding: 7px;
    padding-right: 21px;
    background-image: url(''/images/red_arrow.png'');
    background-repeat: no-repeat;
    background-position: right;
}
    #mainNav ul li.first{
        padding-left: 14px;
    }
    #mainNav ul li a{
        text-decoration: none;
        color: #FFF;
    }
#mainNav ul li:hover{
    background-color: #d5171f;
    background-image: url(''/images/red_arrow2.gif'');
}

Answer 1

Estaría dispuesto a apostar que la imagen de fondo para cada elemento de la lista solo tiene una flecha hacia la derecha.

Al usar Css, solo estás afectando a la imagen de fondo sobre la que estás flotando.

Si usa javascript (o jquery) para esto (onHover), tendrá acceso a un "evento" onHover, dentro del cual podrá afectar a cualquier otra cosa en la página, no solo a la imagen sobre la que se mueve. . En ese caso, querrás cambiar la imagen sobre la que pasas, así como la de la izquierda.

Answer 2

Querrás algo como esto: http://jsfiddle.net/2xXQC/

Observe específicamente el margin-left negativo margin-left en cada elemento de la lista que hace que se superpongan. La imagen que necesitarás es algo como esto:

_____
/    /
/____/

Note to self: Seriously brush up on ASCII art skillz

Excepto el primero. Sin embargo, tenga en cuenta qué anclaje se selecciona cuando el cursor se mueve. Los elementos HTML siempre son rectangulares, por lo que no hay forma de que pueda hacer que el área afectada tenga la forma de la flecha.

Answer 3

Si su red_arrow.png y red_arrow2.gif tienen ambas flechas, es posible que pueda meterse con z-index, pero va a ser necesario ajustarlo todo para alinearlo correctamente.

Probablemente sea mejor usar un sprite css y ajustar la posición de desplazamiento en css.

Revise el texto del enlace para ver algunos buenos tutoriales e ideas.

Answer 4

No tiene que usar javascript. CSS Sprites hace el trabajo para mouseover. Aquí hay un buen artículo:

http://www.dave-woods.co.uk/index.php/mouseover-images-using-css-sprites/

Aquí está esa técnica en acción: http://www.rackspace.com/apps

EDITAR: veo el problema. Necesita hacer AMBAS flechas. Pero aún puede hacer esto con CSS, simplemente aumente el índice z para los estados de vuelo estacionario (necesitará que su sprite incluya las flechas izquierda y derecha):

a: hover {background-position: 0 40px; índice z: 10; }

Answer 5

Simplemente haga que la imagen de desplazamiento tenga ambas flechas en una imagen, luego colóquela de modo que cubra ambas flechas.