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

如@durbnpoisn所述，您可以在div - show/hide上创建mouseover并设置mouseout，以获得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/

Answer 3

使用工具提示怎么样？这是css：

System.nanoTime()

您需要使用位置，宽度，边框，颜色，字体等，直到让它看起来像您想要的样子。

这是html：

    #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;}

关于这一点的好处在于它不依赖于javascript而你可以将它与文本，图像等一起使用。我过去曾经使用它来为教堂提供hove popup引用的经文，即对John的引用3:16会显示一个带有这节经文的弹出窗口。

使用alt文本悬停效果

3 个答案: