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

Quiero que sea tan simple como esto, pero sé que no es:¿Hay alguna forma de pasar el cursor sobre un elemento y afectar a un elemento diferente?

img { 
    opacity: 0.4; 
    filter: alpha(opacity=40); 
} 

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

Así que cuando se pasa sobre IMG, cambia la opacidad de #thisElement al 30% y cambia la opacidad de la imagen al 100%. ¿Hay alguna manera de hacer esto usando solo CSS?

Así que este es el HTML

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="briefcase.js"></script> 
<link rel="stylesheet" type="text/css" href="taskbar.css"/> 
<link rel="stylesheet" type="text/css" href="briefcase.css" /> 
<title>Briefcase</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
</head> 

<body> 

<div class="mask"></div> 
<div class="float"> 
    <div id="album1">Album Title</div> 
    <img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" /> 

    <img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" /> 

    <img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" /> 
</div> 

<div class="gradientTop"></div> 
<div class="gradientBottom"></div> 


</body> 
</html>

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; 
}

Fuente

2011-07-29 Marlon

relacionado: http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements –

La única manera de hacer esto con CSS es si el elemento que afecta es o bien un descendiente o un adyacentes hermano.

En el caso de un descendiente:

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

que se aplicarán a los elementos tales como:

<div id="parent_element"> 
    <div id="child_element">Content</div> 
</div>

Para los hermanos adyacentes:

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

que trabaja para el margen de ganancia por ejemplo:

<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>

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

Dada su ejemplo pseudo-código, es probable que quieren algo como:

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

JS Fiddle demo.

Fuente

2011-07-29 00:20:01

¡Hola, gracias! ¡Voy a intentarlo! – Marlon

Lo probé como tal: img.left: hover + # album1 { opacidad :.4; } img.left: hover { opacity: 1.0; } Considerando que # album1 es el elemento div que se muestra encima del elemento img. No tuvo el efecto deseado y continuó funcionando como antes. ¿Que recomiendas? – Marlon

Recomiendo encarecidamente editar su pregunta (pulse el enlace 'editar') y agregue el margen de html de las partes relevantes de su página a su pregunta. De esa forma puedo ver cuáles podrían ser los problemas. Vale la pena señalar que '' '(selector de hermanos adyacentes) solo puede funcionar para seleccionar un elemento (' # second_sibling') que aparece en el marcado *** después de *** el '# first_sibling'. –

Sé que probablemente esté buscando una forma pura de CSS para hacer lo que quiera, pero le sugiero que utilice HTML + CSS + JS como la maravillosa estructura de MVC que son.

HTML es su modelo, que contiene sus datos
CSS es su punto de vista, la definición de cómo la página debe mirar
JS es su controlador, el control de cómo el modelo y la vista interactúan.

Es el aspecto de control que debe aprovecharse aquí. Desea controlar una vista de un elemento en una interacción del usuario. Eso es exactamente para lo que JS está destinado.

Con JavaScript muy mínimo, puede alternar una clase dentro y fuera de #thisElement cuando se pasa 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.

Fuente

2011-07-29 00:26:50 zzzzBov

No, estoy de acuerdo con usted en que js probablemente sería mejor en este caso, pero el único problema ... No sé js. Actualmente estoy aprendiendo jquery, y quiero una página de trabajo para demostrar en algunos días a algunos inversores. – Marlon

Una estructura MVC para esto es exagerada y tipo de fuera de tema :) –

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

Respuesta

Cuestiones relacionadas