使用替代文本实现悬停效果

Question

我正在尝试为图像创建悬停效果，但无法在 img 标签上添加标题。所以我想在悬停效果上使用 alt 文本属性作为标题。

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

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

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 并在 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/

Answer 3

使用工具提示怎么样？这是 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，您可以将它与文本、图像等一起使用。我过去曾将它用于希望为经文提供弹出式参考的教堂，即对 John 3:16 的引用将显示一个带有该节经文文本的弹出窗口。

使用替代文本实现悬停效果

Use alt text for hover effect

html

css

jquery

alt