3

我正在尝试为我的网站实现一项功能，将鼠标悬停在图像上会在图像底部显示其标题。关于如何做到这一点的任何提示？我试图这样做，但我正在使用的 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/

4

3 回答 3

8

实现这一点的代码是这样的：

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>

于 2013-04-06T22:22:18.110 回答
1

如果可以接受 JavaScript+jQuery，请尝试使用 jQuery TipTip 插件：http ://code.drewwilson.com/entry/tiptip-jquery-plugin

TipTip 使用 title 属性，就像本机浏览器工具提示一样。但是，当使用 TipTip 时，标题将被复制然后从元素中删除，这样浏览器工具提示将不会显示。

于 2013-04-06T22:27:53.910 回答
1

你也可以使用 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.

于 2013-04-06T22:47:27.217 回答