¿Hay alguna forma de pasar el mouse sobre un elemento y afectar un elemento diferente?

Quiero que sea tan simple como esto, pero sé que no es así:

img { opacity: 0.4; filter: alpha(opacity=40); } img:hover { #thisElement { opacity: 0.3; filter: alpha(opacity=30); } opacity:1; filter:alpha(opacity=100); } 

Por lo tanto, cuando pasa el mouse sobre img, cambia la opacidad de #thisElement a 30% y cambia la opacidad de la imagen al 100%. ¿Hay alguna manera de hacer esto usando solo CSS?

Entonces este es el HTML

        Briefcase    
Album Title
Brad at the Lake Making Maria Na'vi Photoshopped Matt

Y este es el CSS:

 body { font: normal small/3em helvetica, sans-serif; text-align: left; letter-spacing: 2px; font-size: 16px; margin: 0; padding: 0; } div.gradientTop { position: absolute; margin-top: 5px; z-index: 2; width: 206px; height: 30px; float: left; background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0)) } div.gradientBottom { position: absolute; margin-bottom: 5px; z-index: 2; width: 206px; height: 120px; float: left; bottom: -210px; background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) } div.float { border-right: 1px solid orange; position: absolute; z-index: 2; margin-left: 5px; margin-top: 5px; float: left; width: 200px; } div.mask { position: relative; z-index: 1; margin-top: 5px; float: left; width: 206px; height: 805px; background-color: white; } img.left { z-index: inherit; margin-bottom: 3px; float: left; width: 200px; min-height: 200px; /* for modern browsers */ height: auto !important; /* for modern browsers */ height: 200px; /* for IE5.x and IE6 */ opacity: 0.4; filter: alpha(opacity=40) } img.left:hover + #album1 { opacity: .4; } img.left:hover { opacity: 1.0; } #album1 { z-index: 2; width: 200px; color: white; text-align: center; position: absolute; background: orange; top: 70px; } 

La única forma de hacer esto con CSS es si el elemento a afectar es un descendiente o un hermano adyacente.

En el caso de un descendiente:

 #parent_element:hover #child_element, /* or */ #parent_element:hover > #child_element { opacity: 0.3; } 

Que se aplicará a elementos tales como:

 
Content

Para hermanos adyacentes:

 #first_sibling:hover + #second_sibling { opacity: 0.3; } 

Lo cual funciona para el marcado, como:

 
Some content in the first sibling
and now in the second

En ambos casos, el último elemento en el selector es el elegido.

Dado su ejemplo de pseudocódigo, probablemente desee algo como:

 img:hover + img { opacity: 0.3; color: red; } 

Demostración de JS Fiddle .

Sé que probablemente estés buscando una forma pura de CSS para hacer lo que quieras, pero te sugiero que uses HTML + CSS + JS como la maravillosa estructura de MVC que son.

  • HTML es tu modelo, que contiene tus datos
  • CSS es su Vista, que define cómo debería verse la página
  • JS es su Controlador, que controla cómo interactúan el modelo y la vista.

Es el aspecto controlador que se debe aprovechar aquí. Desea controlar una vista de un elemento en una interacción del usuario. Para eso está JS.

Con un JavaScript mínimo, puedes alternar una clase dentro y fuera de #thisElement cuando se #thisElement el img . Ciertamente es mejor que jugar juegos de selector de CSS, aunque lo entendería si solo estás dispuesto a aceptar una respuesta de CSS puro.