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

Display text when hovering over image

本文关键字：显示 文本 图像 鼠标 悬停      更新时间：2023-09-26

我试图将文本设置为隐藏，但当您覆盖图像时，文本会显示出来。

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

这就是我的HTML的设置方式。

有可能在CSS中做到这一点吗？还是我必须在Javascript中做到？

我宁愿不使用jQuery。

使用相邻（+）选择器，隐藏图像后面的文本，并在图像悬停时显示。

相邻同级选择器

这被称为相邻选择器。它将只选择紧跟在前一个指定元素之后的指定元素要素

在本例中：

  • 文本用opacity: 0隐藏
  • 文本以opacity: 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>

只需添加以下css代码：

.skill {
    position:relative;
    z-index:101;
}
.skill:hover {
    z-index:99;
}
.exp{
    position : absolute;
    top:100px;
    left:20px;
    z-index:100;
}

小提琴：https://jsfiddle.net/r3gyr9oh/

试试这个：

.exp{
  display: none;
}
.skill:hover + .exp{
  display: block;
 }

如果你只是想避免任何jquery或javascript，你可以使用

  <img src="img/js.png" alt="Javascript" class="skill" title="your name">

您想要实现什么？我的意思是，如果用户悬停在你想显示工具提示之类的图像上，你想给他们一个表达式吗？如果这是你想做的，那么可以通过使用图像标签中的瓦片来完成

    <!DOCTYPE html>
<html>
<body>
<img src="Your Image source" alt="Your text" width="42" height="42" title="Your text Goes here">
</body>
</html>

希望这能有所帮助。

相关文章：