Избавиться от альтернативного текста для HTML при наведении

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-* Атрибуты позволят вам вставить дополнительные данные в разметку, не вызывая заголовок агента пользователя по умолчанию.