使用alt文本进行悬停效果

Question

我试图为图像创建一个悬停效果，但我不能在img标签上添加一个标题。因此，我想使用alt文本属性作为标题悬停效果。

<img width="300" height="169" src="300x169.jpg" class="attachment-medium" alt="sometexthere">

我是否可以使用任何jQuery插件或其他方法来提取alt文本并使用它？

Answer 1

和评论一样，我不知道你为什么不能在代码中或者在事实之后添加一个标题。

$(document).ready(function(){
    $("img").each(function(){
        $(this).attr("title", $(this).attr("alt"));
    });
});

这将在无法修改文本代码本身的情况下为图像创建一个标题。您还可以使用JQuery UI制作工具提示：https://jqueryui.com/tooltip/

也可以使用.hover()制作您自己的自定义提示：https://api.jquery.com/hover/

Answer 2

那使用工具提示呢？下面是css：

    #tooltip {position: relative; display: block;}
    #tooltip a span {display: none; color: #FFFFFF;}
    #tooltip a:hover span {display: block; position: absolute; 
        width: 250px; background-color: #048042; left: 300px; 
        top: -10px; color: #FFFFFF; padding: 20px; 
        border: 4px solid #c4c3c3;}
    #tooltipBottom {position: relative;}
    #tooltipBottom a span {display: none; color: #FFFFFF; }
    #tooltipBottom a:hover span {display: block; position: absolute; 
        width: 250px; background-color: #520e4e; left: 300px; 
        top: -300px; color: #FFFFFF; padding: 20px; 
        border: 4px solid #ffffff;}

你会想玩周围的位置，宽度，边框，颜色，字体等，直到你让它看起来像你希望它的样子。

以下是html：

    <p id="tooltip"><img src="YOURIMAGE" /><a href="#" 
        style="text-decoration: none;"><img src="TOOLTIPIMAGE" alt="" 
        width="20" height="20" border="0" style="margin: 2px 0px 0px 
        2px" /><span>DESCRIPTION YOU WANT SHOWN</span></a></p>

这方面的好处是它不依赖于javascript，你可以将它与文本、图像等一起使用。我过去曾在教堂中使用过它，这些教堂希望使用hove弹出式引用经文，也就是说，对John 3:16的引用将显示与经文一起出现的弹出式。

Answer 3

正如@durbnpoisn所提到的，您可以创建一个div并在mouseover-mouseout上设置show/hide以产生tooltip效果。

<img width="300" height="169" src="300x169.jpg" class="attachment-medium" alt="sometexthere">
    <div></div>

$('img').mouseover(function()
{
  $('div').text($(this).attr("alt"));
  $('div').show();
}).mouseout(function()
{
    $('div').hide();
});;

http://jsfiddle.net/1fe1sanv/1/