호버 (hover)에서 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-* 속성이 기본 사용자 에이전트 캡션을 트리거하지 않고 마크 업에 추가 데이터를 삽입 할 수 있습니다.