reemplazar - cambiar texto por otro css

CSS, desplaza un elemento, afecta a otro

Question

Cuando cierro un "li a" ¿puedo entonces afectar otro elemento en CSS simple?

porque estoy tratando de hacer una caja deslizante, como un elemento de fondo, al pasar mi enlace. Exactamente como este sitio de navegación, solo en lugar de cuando está activado, funciona con el vuelo estacionario

http://www.zindhai.com

este es mi código

nav ul li a:hover{
color: #C3E1FF;
font-weight: 700;
}
nav ul li span:hover{
-webkit-transform:translate(0px, 0px);
-webkit-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
nav ul li span{
height:43px;
width:300px;
position: absolute;
background-color:#47525D;
-webkit-transform:translate(300px, 0px);
-webkit-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
background-position:initial initial;
background-repeat:initial initial;
}

¡gracias por adelantado!

Asi es como luce ahora;

http://jsfiddle.net/mbyc3tf9/

Answer 1

Sí, es bastante fácil de hacer. Suponiendo que su HTML se llame algo así como .myElement por ejemplo. Todo lo que necesitas hacer es ...

nav ul li a:hover .myElement { ... }

Luego ingrese su CSS dentro de { } .

Answer 2

Si necesita mover el tramo, cuando coloca el mouse sobre la a, agregue esto

nav ul li a:hover > span {}