2010-12-30 15 views
20

No estaba seguro de si esto es posible o no. Estoy trabajando en animaciones de CSS3 ahora mismo y tengo que situarme sobre un enlace que afectará a otro elemento de div (no hijo) en la página. No estaba seguro de si hay un trabajo alrededor o no.¿Se puede aplicar un efecto de desplazamiento de CSS a un elemento que no sea secundario del elemento de desplazamiento?

<style type="text/css"> 

#header { 
background-color:red; 
} 

#header:hover .element { 
background-color:blue; 
} 

.element { 
background-color:green; 
} 

</style> 

-

<header id="header"> 
    <li><a href="#">Hover</a></li> 
</header> 

<div class="element" > 
<p>hello world </p> 
</div> 
+0

esto debería funcionar ... – sethvargo

+0

puede verificar que lo probé en Chrome y Firefox. y no es así:/ – WilliamB

+1

Eso no funcionará porque su segunda regla dice cuando encuentro un elemento con el elemento 'clase' de clase dentro de un elemento con la clase de' bgchange' que se está sobrepasando, dentro de un elemento con la ID 'header' le aplica esta regla. Y esto no refleja el HTML que usted proporciona. –

Respuesta

-1

No lo creo. Esta construcción: #header .bgchange: hover .element indica que .element está dentro de .bgchange. Supongo que este necesita JS

1

Desafortunadamente, esto no funcionará a menos que su clase .element esté dentro del elemento .bgchange. Esa es la naturaleza de la cascada: no se puede (a través de CSS solo) afectar a los elementos DOM que se eliminan estructuralmente/jerárquicamente el uno del otro.

13

Hay general sibling selector (~) que selecciona elementos hermanos.

Así que con el HTML que ha publicado, #header:hover ~ .element seleccionaría <div class="element"> cuando sea un hermano posterior del encabezado fijo.

Even IE 7 supports it, por lo que se encuentra en un terreno relativamente sólido.

+2

el "~" funciona en -moz- pero no -webkit- – WilliamB

+0

Investigaré los selectores hermanos para el kit web. – WilliamB

+2

Parece ser un error de webkit. http://demo.marcofolio.net/webkit_bug/ – WilliamB

21

Dado que se trata de hermanos adyacentes, puede usar el adjacent sibling selector: +.

#header:hover + .element { 
background-color:blue; 
} 

Esto es bien soportado en la mayoría de los navegadores modernos *. IE7 puede tener errores. IE6 y abajo no lo admite.

* Una de las otras respuestas menciona el selector general de hermanos, que no funciona en Webkit cuando se usa con una pseudoclase dinámica como :hover debido a this bug. Tenga en cuenta que este mismo error causará problemas en Webkit si intenta apilar selectores de hermanos adyacentes con una pseudoclase dinámica. Por ejemplo, #this:hover + sibling + sibling no funcionará en Webkit.

+0

+1 ¡Dulce! @WilliamB probado y funciona en Webkit – Kai

+0

¡Muy bonito! Sí '+' funciona. Esta pregunta ha producido dos buenas soluciones. El '+' responde a esta pregunta, pero el '~' servirá para referencia futura una vez que el equipo de webkit corrige ese error. – WilliamB

+3

Además, esto no funcionaba para mí hasta que me di cuenta de que el hermano en cuestión tenía que estar detrás (en el html) del elemento sobre el que flotaba. – captDaylight

2

Re el error webkit selector de hermanos, este artículo tiene un conmutador central única solución:

http://css-tricks.com/webkit-sibling-bug/

Citando:

body { -webkit-animation: bugfix infinite 1s; } 
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } 

anterior crea una animación en la página y este mágicamente parece solucionar el problema. Lo anterior se puede agregar directamente a la CSS principal o crear una sola hoja de estilos de webkit para su IE, por ejemplo.

recomendaría el webkit única hoja de estilo algo como:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:0)" href="webkit.css"/> 

ya que lo oculta a otros navegadores y se puede retirar más fácilmente en el futuro una vez que el error se corrige.

Cuestiones relacionadas