javascript - 将鼠标悬停在图像上时显示文本

Question

我正在尝试将文本设置为隐藏，但是当您越过图像时，文本会显示出来。

<img src="img/js.png" alt="Javascript" class="skill">
<p class="exp">Text goes here</p>

这就是我的 HTML 设置方式。

是否可以在 CSS 中执行此操作，还是我必须在 Javascript 中执行此操作？

我不想使用 jQuery。

Answer 1

使用 the adjacent (+) selector , 隐藏图片后的文字，悬停在图片上时显示。

Adjacent sibling selectors

This is referred to as an adjacent selector. It will select only the specified element that immediately follows the former specified element.

在这个例子中:

• 文本被隐藏，opacity: 0
• 悬停时显示文本，不透明度:1
• transition 平滑淡入和淡出文本

注意:文本也可以用display:none隐藏，用display:block显示，但是这个方法不能转换。

.skill + .exp {
  opacity: 0;
  transition: opacity 1s;
}
.skill:hover + .exp {
  opacity: 1;
}

<img src="http://www.placehold.it/300" alt="Javascript" class="skill">
<p class="exp">Text goes here</p>