Question

所以我试图在使用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>

我也尝试过没有转换，但仍然无效。

Answer 1

您需要使用+

激活悬停为兄弟姐妹

所以将你的课程移到链接。

此外，您不能将转换规则放在悬停规则中，并将其保留为主要样式。

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

对于大多数关于风格的规则来说，这是相同的

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我不认为这会使用可见性：隐藏元素。

首先尝试使其适用于颜色变化（用于测试）：在鼠标上方更改颜色。

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

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

2 个答案: