当我将鼠标悬停在图像img1
上时,我希望出现相应的文本text1
。 img2和text2同样如此,等等。
这里是我尝试的代码,但是当我将鼠标悬停在图像上时,文本不会出现。我在做什么错?
这是我的html
<section>
<div class="planche">
<img class="img1" src="./images/1.jpg">
<img class="img2" src="./images/2.jpg">
<img class="img3" src="./images/3.jpg">
</div>
<div class="text1">
<p>
TEXTE 1
</p>
</div>
<div class="text2">
<p>
TEXTE 2
</p>
</div>
<div class="text3">
<p>
TEXTE 3
</p>
</div>
</section>
这是我的CSS:
.img1:hover .text1 {
opacity: 1;
background-color: white;
}
对于您当前的HTML结构而言,这是不可能的,如果您可以将IMG和文本移到同一个div中,则可以这样做-否则,您将不得不使用JavaScript
.planche .img1:hover ~ .text1 {
opacity: 1;
background-color: red;
}
.planche .img2:hover ~ .text2 {
opacity: 1;
background-color: red;
}
.planche .img3:hover ~ .text3 {
opacity: 1;
background-color: red;
}
<section>
<div class="planche">
<img class="img1" src="https://placekitten.com/80/80?image=1">
<img class="img2" src="https://placekitten.com/80/80?image=2">
<img class="img3" src="https://placekitten.com/80/80?image=3">
<div class="text1">
<p>TEXTE 1</p>
</div>
<div class="text2">
<p>TEXTE 2</p>
</div>
<div class="text3">
<p>TEXTE 3</p>
</div>
</div>
</section>
一种纯CSS方法是在语义友好的figure
中包围每个图像,并使用通用的同级组合器(~
)来定位每个关联的文本div
。
来自MDN:
通用同级组合器(〜)分隔两个选择器并进行匹配第二个元素仅在第一个元素之后(尽管不是必要
立即),并且两者都是相同父元素的子元素。
.planche1:hover ~ .text1,
.planche2:hover ~ .text2,
.planche3:hover ~ .text3 {
color: red;
}
<section>
<figure class="planche planche1">
<img class="img1" src="http://placekitten.com/100/50?image=1" alt="description goes here">
</figure>
<figure class="planche planche2">
<img class="img2" src="http://placekitten.com/100/50?image=2" alt="description goes here">
</figure>
<figure class="planch planche3">
<img class="img3" src="http://placekitten.com/100/50?image=3" alt="description goes here">
</figure>
<div class="text1">
<p>
TEXTE 1
</p>
</div>
<div class="text2">
<p>
TEXTE 2
</p>
</div>
<div class="text3">
<p>
TEXTE 3
</p>
</div>
</section>