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/

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
}

这样一个HTML

<a>
  <img src="image.png">
  <span>caption</span>
</a>

Answer 2

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

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

Answer 3

您也可以使用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。

悬停图片标题

3 个答案: