使用 CSS 在鼠标悬停时添加文本答案

【问题标题】：Adding text on mouseover with CSS使用 CSS 在鼠标悬停时添加文本
【发布时间】：2015-10-07 03:12:56
【问题描述】：

所以我试图在鼠标悬停后使用 CSS 显示文本，但显然它不起作用。我以此为参考：Text on image mouseover?

非常感谢您的回答

代码如下：

    .resume p#pname {
      position: absolute;
      top: 367px;
      left: 1075px;
      font-weight: bold;
      visibility: hidden;
    }
    .resume img.pdf:hover #pname {
      visibility: visible;
      transition: visibility 1s ease-in;
    }

<div class="resume">
  <a href="#">
    <img style="height:auto; width:auto; max-width:75px; max-height:75px;" src="imgs/pdf.png" class="pdf">
  </a>
  <p id="pname">PDF Resume</p>
  <a href="#">
    <img class="word" style="height:auto; width:auto; max-width:65px; max-height:70px;" src="imgs/mword.png">
  </a>
  <p id="wname">Word Doc Resume</p>
  <img id="pline" style="height:auto; width:auto; max-width:200px; max-height:150px;" src="imgs/line1.png">
  <img id="wline" style="height:auto; width:auto; max-width:200px; max-height:150px;" src="imgs/line2.png">
</div>

我也试过不用过渡，但还是不行。

【问题讨论】：

当心它不是#pname是#wname

标签： html css

【解决方案1】：

你需要使用 + 激活悬停作为兄弟

所以把你的班级移到链接上。

此外，您不要将过渡放在悬停规则中，而是将其保留为主要样式。

可见性也不是可转换的样式，而是使用不透明度。

这对于大多数 on off 样式规则都是相同的

.resume p#pname {
  position: absolute;
  top: 367px;
  left: 1075px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 1s ease-in;
}
.resume .pdf:hover + #pname {
  opacity: 1;
}

<div class="resume">
  <a href="#" class="pdf">
    <img style="height:auto; width:auto; max-width:75px; max-height:75px;" src="imgs/pdf.png">
  </a>
  <p id="pname">PDF Resume</p>

  <a href="#">
    <img class="word" style="height:auto; width:auto; max-width:65px; max-height:70px;" src="imgs/mword.png">
  </a>
  <p id="wname">Word Doc Resume</p>
  <img id="pline" style="height:auto; width:auto; max-width:200px; max-height:150px;" src="imgs/line1.png">
  <img id="wline" style="height:auto; width:auto; max-width:200px; max-height:150px;" src="imgs/line2.png">
</div>

【讨论】：

非常感谢！也谢谢你的解释。现在知道了，再次感谢。像魅力一样工作

【解决方案2】：

我认为 hove 不适用于可见性：隐藏元素。

首先尝试使其与颜色更改一起工作（用于测试）：鼠标悬停时更改颜色。

然后，如果一切正常，请尝试用不透明度替换可见性：-不透明度：0；不透明度：1；（0 - 不可见，1 - 可见）。否则请确保您的悬停元素具有宽度和高度。

【讨论】：