Jquery 输出链接的 alt 悬停

Jquery output link's alt on hover

本文关键字：alt 悬停 链接 输出 Jquery      更新时间：2023-09-26

我正在尝试在悬停时输出链接的"alt"。（文本显示在#containerdiv 中）。

这是我到目前为止一直在尝试的（它不起作用）：

如果您有更好的想法，请提出建议。

.HTML 

<div><a href="#" class="heroes" alt="necromancer">Icon</a></div>
<div><a href="#" class="heroes" alt="witch">Icon</a></div>
<div><a href="#" class="heroes" alt="barbarian">Icon</a></div>
<div><a href="#" class="heroes" alt="troll">Icon</a></div>
<div id="container"></div>

.JS：

$('.container').hover(function() {
    var hero = $(this).attr('alt');
    $('#container').text(hero);
}, function() {
    $('#container').text("");
});

JSFIDDLE： http://jsfiddle.net/XDky6/

$('.heroes').hover(function() {
    var hero = $(this).attr('alt');
    $('#container').text(hero);
}, function() {
    $('#container').text("");
});

hover应该在$('.heroes')上调用，而不是$('.container')。

你打错了代码。您引用了错误的类。

它应该是.heroes但它是.container.

固定代码：

    $('.heroes').hover(function() { 
    var hero = $(this).attr('alt'); 
    $('#container').text(hero); 
}, function() { 
    $('#container').text(""); 
}); 

$('.heroes').hover(
 function() {
    var hero = $(this).attr('alt');
    $('#container').text(hero);
},
function() {
    $('#container').text("");}
});

工作演示 http://jsfiddle.net/RdSCV/1/

传递了错误的类，即.heroes正确的类

法典 

$('.heroes').hover(function() {
    var hero = $(this).attr('alt');
    $('#container').text(hero);
}, function() {
    $('#container').text("");
});​

如果您可以接受链接旁边显示的alt文本，则：

<style>
a:hover:after {
  content: attr(alt);
  position: absolute;
  background: #fff;
  padding: 2px;
  border: 1px solid #999;
  box-shadow: 1px 1px 5px #bbb;
}
</style>

初始选择器不正确。 将.container更改为.heroes

相关文章：