Question

我正在尝试在悬停时输出链接的“alt”。（文本显示在#container div）。

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

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

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/

Answer 1

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

应在hover上调用

$('.heroes')，而不是$('.container')。

Answer 2

您错误输入了代码。你指的是错误的班级。

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

固定代码：

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

Answer 3

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

Answer 4

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

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

<强>码

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

Answer 5

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

Answer 6

如果您可以接受链接旁边显示的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>

悬停时Jquery输出链接的alt

6 个答案: