css - transicion - ¿Hay alguna forma de pasar el mouse sobre un elemento y afectar un elemento diferente?
mostrar texto al pasar el mouse css (2)
Esta pregunta ya tiene una respuesta aquí:
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
<!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;
}
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:
<div id="parent_element">
<div id="child_element">Content</div>
</div>
Para hermanos adyacentes:
#first_sibling:hover + #second_sibling {
opacity: 0.3;
}
Lo cual funciona para el marcado, como:
<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.
Dado su ejemplo de pseudocódigo, probablemente desee algo como:
img:hover + img {
opacity: 0.3;
color: red;
}
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.