鼠标悬停时的图像标题

Question

我正在尝试为我的网站实现一个功能，即将鼠标悬停在图像上时，在图像底部显示其标题。有没有关于如何做到这一点的提示？ 我试图去做它，但我正在使用的CSS模板中的某些内容会干扰。

以下是我想为其添加标题的图像：

<section class="5grid is-gallery">
    <div class="row">
        <div class="4u"> <a href="matthewpiatetsky.com/MicroChess.html" class="image image-full"><img src="images/1a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/ClusteringDistance.html" class="image image-full"><img src="images/2a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/FourInARow.html" class="image image-full"><img src="images/3a.jpg" alt=""></a>

        </div>
    </div>
    <div class="row">
        <div class="4u"> <a href="matthewpiatetsky.com/Fidelity.html" class="image image-full"><img src="images/4a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/Concordance.html" class="image image-full"><img src="images/5a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/PhotoShare.html" class="image image-full"><img src="images/6a.png" alt=""></a>

        </div>
    </div>
</section>

注意：我尝试使用这些，但不确定我做错了什么。 http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

- LemonMan

---

它有任何CSS代码吗？ - pzin

是的，这就是它。http://matthewpiatetsky.com/cs103/css/style.css - LemonMan

难道不应该有一个 :hover 伪类影响 div.4u a 吗？也许我没有理解你。 :-/ - pzin

好的，应该有方法，只是我不确定如何在悬停时显示图像标题。 - LemonMan

对不起，我给你了错误的CSS文件。5grid的大部分内容在这里： http://matthewpiatetsky.com/cs103/css/5grid/core.css - LemonMan

你想要的一切都在这里，学习并调整 http://www.hongkiat.com/blog/css3-image-captions/ - Nik Drosakis

Answer 1

实现这一功能的代码应该是这样的:

a {
  position: relative
}

a span {
  display: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,.8);
}

a:hover span {
  display: block
}

<a>
  <img src="http://placehold.it/300x200">
  <span>caption</span>
</a>

- pzin

Answer 2

你也可以使用CSS的attr()。

a {
  position: relative;
}

a:hover:after {
  content: attr(title);
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  z-index: 999;
  background: #ccc;
  color: black;
  padding: 5px;
}

还可以使用另一个属性，比如alt。

- pzin

Answer 3

如果可以使用JavaScript+jQuery，建议尝试使用jQuery TipTip插件：http://code.drewwilson.com/entry/tiptip-jquery-plugin TipTip使用与本地浏览器工具提示相同的title属性。但是，在使用TipTip时，该标题将被复制并从元素中删除，以便浏览器工具提示不会显示出来。

- Alex Shesterov