Uso: desplácese para modificar el CSS de otra clase?

Question

¿Hay alguna manera de modificar el CSS para una clase cuando se pasa sobre un elemento de otra clase utilizando solo CSS?

Algo así como:

.item:hover .wrapper { /*some css*/ } 

Sólo 'envoltorio' no está dentro 'item', es otro lugar.

Realmente no quiero usar javascript para algo tan simple, pero si tengo que hacerlo, ¿cómo lo haría? Aquí está mi intento fallido:

document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";"; 

Solo hay un elemento de cada clase. No sé por qué no usaron ID cuando crearon la plantilla, pero así es y no puedo cambiarla.

[Editar]

Es un menú. Cada elemento de menú tiene una clase distinta. Cuando coloca el mouse sobre el elemento, aparece un submenú a la derecha. Es como una superposición, cuando uso la herramienta 'Inspeccionar elemento' puedo ver que todo el sitio web html cambia cuando el submenú está activo (lo que significa que no hay nada más que el submenú). La clase que llamo 'envoltura' tiene el CSS que controla el fondo del submenú. Realmente no hay conexión que pueda ver entre las dos clases.

Answer 1

No es posible en CSS en este momento, a menos que desee seleccionar un elemento niño o hermano (trivial y se describe en otras respuestas aquí).

Para los demás casos, necesitará JavaScript. jQuery y frameworks como Angular pueden abordar este problema con relativa facilidad.

[Editar]

Con el nuevo CSS (4) Selector de :has(), podrás apuntar elementos padre/clases, por lo que una solución CSS-sólo es viable en un futuro próximo!

Answer 2

Siempre .wrapper está dentro de .item, y siempre que no estés en IE 6 o .item sea una etiqueta, el CSS que tienes debería funcionar bien. ¿Tiene evidencia para sugerir que no lo es?

EDIT:

CSS por sí sola no puede afectar a algo que no es en ella contenidas. Para que esto suceda, el formato de su menú, así:

<ul class="menu"> 
    <li class="menuitem"> 
     <a href="destination">menu text</a> 
     <ul class="menu"> 
      <li class="menuitem"> 
       <a href="destination">part of pull-out menu</a> 
... etc ... 

y el CSS como esto:

.menu .menu { 
    display: none; 
} 

.menu .menuitem:hover .menu { 
    display: block; 
    float: left; 
    // likely need to set top & left 
} 

Answer 3

Hay dos enfoques que puede tomar, para tener un elemento cernía afecta (E) otro elemento (F):

1. F es un elemento hijo del E, o
2. F es una tarde-hermano (o hermana descendiente) elemento de E (en ese E aparece en el margen de beneficio/DOM antesF):

Para ilustrar la primera de estas opciones (F como descendiente/niño de E):

.item:hover .wrapper { 
    color: #fff; 
    background-color: #000; 
}​ 

Para demostrar la segunda opción, F ser un elemento hermano de E:

.item:hover ~ .wrapper { 
    color: #fff; 
    background-color: #000; 
}​ 

En este ejemplo, si .wrapper fue un hermano inmediato de .item (sin otros elementos entre los dos) también puede usar .item:hover + .wrapper.

JS Fiddle demonstration.

Referencias:

• CSS 2.1 selectors, at the W3.org.

Answer 4

Puede hacerlo haciendo el siguiente CSS. se puede poner aquí el css que necesita para afectar a la clase niño en caso de vuelo estacionario sobre la raíz

.root:hover .child { 
 
    
 
}