Question

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

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

这就是我的HTML设置方式。

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

我宁愿不使用jQuery。

Answer 1

只需添加此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/

Answer 2

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

相邻的兄弟选择器

这被称为相邻选择器。它只会选择   紧跟在前者指定的指定元素   元件。

在这个例子中：

该文字隐藏有opacity: 0
文字显示在悬停时opacity: 1
transition平滑地淡入淡出文本

注意：该文字也可以隐藏display: none并显示为display: block，但此方法无法转换。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个：

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

Answer 4

如果您只是想避免使用任何jquery或javascript

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

Answer 5

你想要达到什么目的？我的意思是，如果用户将鼠标悬停在要显示工具提示之类的图像上，则需要向用户表达？如果这是您想要做的事情，那么可以通过使用图片标签中的图块

来完成

    <!DOCTYPE html>
<html>
<body>

<img src="Your Image source" alt="Your text" width="42" height="42" title="Your text Goes here">

</body>
</html>

希望这有帮助。

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

5 个答案: