[悬停img时如何显示div [重复]

问题描述 投票:-1回答:2

当我将鼠标悬停在图像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 css image hover
2个回答
0
投票

对于您当前的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>

0
投票

一种纯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>

jsFiddle

© www.soinside.com 2019 - 2024. All rights reserved.