tengo el código HTML siguiente:cambio CSS dos enlaces cuando se cierne sobre cualquiera de ellos
<div id="main">
<div id="home" class="section">
<ul>
<li class="home_li"><a href="#home" class="goto_home">Home</a></li>
<li class="about_li"><a href="#about" class="goto_about">About us</a></li>
<li class="contact_li"><a href="#contact" class="goto_contact">Contact</a></li>
</ul>
</div> <!-- End home -->
<div id="nav">
<ul>
<li class="home_li"><a href="#home" class="goto_home"></a></li>
<li class="about_li"><a href="#about" class="goto_about"></a></li>
<li class="contact_li"><a href="#contact" class="goto_contact">Contact</a></li>
</ul>
</div> <!-- End nav -->
</div> <!-- End main -->
Lo que estoy tratando de hacer es cambiar el estado de ambos enlaces cuando uno está siendo cernía. Por ejemplo, si desplace el cursor sobre 'about' debajo de <div id="home">, deseo que se muestren con opacidad ambos enlaces, el uno y el que está debajo de <div id="nav">.
Estoy tratando de mantenerme alejado de JS si es posible. Hasta ahora, mi intento con CSS ha sido con selectores adyacentes, pero eso es nuevo para mí, así que no he podido hacerlo funcionar.
#home .about_li a:hover + #nav .about_li a {
opacity: .5;
}
¿Se puede hacer esto solo con CSS?
EDITAR:
Gracias por sus respuestas. ¿Cómo necesitaría cambiar el HTML para que funcione el selector adyacente? Podría probarlo y hacer algunos ajustes si no afecta seriamente el resto del sitio (la estructura ya está casi completa).
otra edición:
Está bien, he leído un poco más sobre estos selectores y ahora lo entiendo. Pensé que al estar todos dentro del div principal, eran hermanos: P y ahora veo por qué no funciona. Veré si puedo encontrar una solución para usar solo CSS y volveré a publicar aquí. De lo contrario, voy a ir con JS :(
Lo que tienes no funciona porque tu regla CSS está buscando una etiqueta a bajo #nav que sea un hermano adyacente de la otra etiqueta en #home. Creo que necesitas JS para hacerlo. –
CSS realmente no puede hacer esto. Incluso si cambiar drásticamente el HTML fuera una opción, no sería capaz de hacer que el primer enlace cambie cuando pasa el mouse sobre el segundo. ¡Entrégate a jQuery! – thirtydot
@brunn: http://jsfiddle.net/hweEr/4/ – Jawad