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>
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%;
}
<li><a href="#">enlace1
</a></li> <li><a href="#">enlace2
</a></li> <li><a href="#">enlace2
</a></li> <li><a href="#">enlace4
</a></li>