anular el evento hover con css

azaz · #1 (**permalink**) 15/02/2014, 10:25

Hola, si tengo una lista li con un evento hover para los li es posible anular este evento para el ultimo li de la lista?
con css, saludos.

PHPeros · #2 (**permalink**) 15/02/2014, 10:35

Con el selector not, aunque no es soportado por todos los navegadores.

Código CSS:

Ver originalli:not(:last-child):hover

azaz · #3 (**permalink**) 15/02/2014, 10:40

Si no es soportado por los navegadores no me vale, igual puedo solucionar mi problema de otra forma partiendo de este html.

Código HTML:

Ver original<ul>
            <li><a href="#">enlace1</a></li>
            <li><a href="#">enlace2</a></li>
            <li><a href="#">enlace3</a></li>
            <li></li>
          </ul>

como puedo hacer que al hacer hover en el segundo enlace osea la etiqueta a me cree un css en el ultimo li?
saludos

PHPeros · #4 (**permalink**) 15/02/2014, 10:52

Pero no te sirve algo como esto??

azaz · #5 (**permalink**) 15/02/2014, 11:02

Hola gracias por tu ayuda, creo que si me podria servir pero no se aplicarlo a lo que deseo, te comento por si me quieres ayudar, en la lista de arriba al hacer hover en el primer li me debe mostrar un css en el ultimo li, pero al hacer hover en el segundo li otro css diferente al ultimo li igual con el tercer li, pero claro que si pulsas el ultimo li que no me haga hover, no consigo aplicarlo con tu ejemplo.
saludos.

PHPeros · #6 (**permalink**) 15/02/2014, 11:11

Pero para interactuar entre varios elementos necesitarás JavaScript...

azaz · #7 (**permalink**) 15/02/2014, 12:50

Esto es un ejempo sencillo de lo que quiero hacer y no funciona, trata de una lista con 5 elementos cada uno con un enlace dentro excepto el ultimo que hara de foco es decir cada vez que se pone el raton sobre una lista la lista con clase foco se pondra encima, osea encima de cada lista que se hace hover, pero no se que pasa que cuando haces hover y te mueves con el raton por la lista el evento vuelve al principio y retorna, no se porque pasa esto haber si me ayudais, este es el html.

Código HTML:

Ver original<!doctype html>
<html>
<head>
<style type="text/css">
div{
    position:relative;
    overflow:hidden;
}
div>li {
    z-index: 1;
    width: 22%;
    display:inline-block;
    background:yellow;
}
.foco {
    width: 24%;
    height: 20px;
    position: absolute;
    top: 0;
    right: -24%;
    z-index: 1;
    opacity: .5;
    background: black;
}
div>li:nth-child(1):hover ~ .foco {
    right: 76%;
}
div>li:nth-child(2):hover ~ .foco {
    right: 51%;
}
div>li:nth-child(3):hover ~ .foco {
    right: 26%;
}
div>li:nth-child(4):hover ~ .foco {
    right: 13.5%;
}
</style>
</head>
 
<body>
<div>
    <li><a href="#">enlace1</a></li>
    <li><a href="#">enlace2</a></li>
    <li><a href="#">enlace2</a></li>
    <li><a href="#">enlace4</a></li>
    <li class="foco"></li>
</div>
</body>
</html>