悬停图像时如何使div出现[重复]答案

【问题标题】：How to make appear a div when a img is being hovered [duplicate]悬停图像时如何使div出现[重复]
【发布时间】：2020-04-23 01:35:16
【问题描述】：

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

【问题讨论】：

您可以为此使用 JavaScript / jQuery 吗？我不相信在当前结构的纯 CSS 中是可能的 - 或者，文本 div 是否可以移动到 planche div 中
这是因为 css 的工作方式。您的符号表示：“如果悬停.img1，则将规则应用于.text1，即.img1。这行不通。你可以用 css 做的最好的事情是使用兄弟选择器，但它也需要对 html 进行更改。
虽然不需要 jQuery，但 JavaScript 是因为 CSS 中没有父选择器，因此无法根据悬停的图像选择相关的<div>。
这个不需要jQuery
是的，我已经编辑了我的评论来显示这个

标签： html css image hover

【解决方案1】：

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

【讨论】：

使用placekitten，你知道你想要