如何在悬停图像时显示 div

Question

当我将鼠标悬停在图像 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;
}

Answer 1

一种纯粹的 CSS 方法是用语义友好 figure 包围每个图像，并使用通用兄弟组合器 (~) 来定位每个关联的文本 div .

来自MDN：

The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily

立即），并且都是同一父元素的子元素。

.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

如何在悬停图像时显示 div

How to make appear a div when a img is being hovered

html

css

image

hover