Question

当mouser悬停在它上面时我想在图像上显示文字（不使用JS），我尝试使用html / css并查看stackoverflow，仍然无法找到实现此功能的方法。有人有想法吗？再次感谢您的帮助。

图像下方已有文字（h2）的事实令我困惑，我尝试使用此方法（Text on image mouseover?）并失败。

HTML

<ul class="portfolio">
    <li class="project option-1">
        <div class="project-image">
            <a href="default.asp"><img src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"/>
        </div>
        <div class="project-info">
            <h2 class="project-info-title">Cricket Journey</h2>
            </a>
        </div>
    </li>

我没有显示CSS，因为我已经知道如何实现此函数的HTML方面，而不是CSS

Answer 1

如果我理解正确，您希望图像悬停在图像上时显示文本。如果是，则在图像悬停时显示<p>（图像右侧），如下所示：

＆＃13;

p {
  /* position the text */
  position: absolute;
  left: 0px;
  display: none;
  width: 300px;
  text-align: center;
  margin: 0;
  height: 20px;
  top: 140px;
  
}
img {
  position: absolute;
  left: 0;
  top: 0;
}
img:hover + p {
  display: block;
}

＆＃13;

<img src="/favicon.ico" height="300">
<p>some text to display here</p>

＆＃13;

编辑：中心文字

鼠标悬停在图像上的文字？

1 个答案: