Question

我试图创建一个图像页面，并且我通过添加仅在每个图像悬停时出现的标题来使它们变得有趣。但是现在我遇到了重复字幕的问题，因为当图像悬停在我的鼠标上时，似乎还会出现白色字幕框。我想有人说这是替代文字或其他什么，但我不确定。在任何情况下，我想删除它，所以我不会干扰我的其他发烧友悬停标题。我无法附上图片，但希望您能理解我的问题。

我使用的代码如下：

<style type="text/css">
  a.hovertext {
    position: relative;
    width: 320px;
    text-decoration: none !important;
text-align: center;
  }
 a.hovertext:after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0em 0px;
    width: 320px;
    background: rgba(0,0,0,0.8);
    text-decoration: none !important;
    color: #fff;
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
      }
  a.hovertext:hover:after, a.hovertext:focus:after {
    opacity: 1.0;
  }
</style>
<div class="noborderdv" style="clear: both; text-align: left;">
<table align="center" border="0" cellpadding="5" style="width: 500px;">
<tbody>
<tr>
<td align="center" valign="center"><a class="hovertext" href="https://www.blogger.com/blogger.g?blogID=6870619294109194114#" title="Sandwich"><img alt="" border="0" src="http://3.bp.blogspot.com/-nHv87zBke7I/U5fwCcRoe2I/AAAAAAAAAgs/BupH3BsNoj4/s1600/DSCN6778.JPG" height="258" width="320" /></a>
</td>
<td align="center" valign="center"><a class="hovertext" href="https://www.blogger.com/blogger.g?blogID=6870619294109194114#" title="Bitte Sandwich"><img alt="" border="0" src="http://1.bp.blogspot.com/-PFpW_AZbbFg/U5fwIhjwXZI/AAAAAAAAAhM/OMQZpy8wx2E/s1600/DSCN6866c.JPG" height="240" width="320" /></a>
</td>
</tr>
</tbody></table>
</div>

如何摆脱白盒标题，因为当我有更长的标题时，这会特别烦人。

Answer 1

替换它：

<style type="text/css">
  a.hovertext:after { content: attr(title); }
</style>
<a title="Sandwitch">...</a>

用这个：

<style type="text/css">
  a.hovertext:after { content: attr(data-title); }
</style>
<a data-title="Sandwitch">...</a>

HTML5 data-*属性允许您在标记中插入其他数据，而不会触发默认的用户代理标题。

在悬停时删除html的替代文字

1 个答案: