0

I am trying to output the link's "alt" on hover. (Text is showing up in #container div).

This is what i have been trying so far (it doesnt work):

If you have any better ideas, please suggest.

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/

4

6 回答 6

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

hover应该叫上$('.heroes')，不是$('.container')。

于 2012-05-29T11:36:55.820 回答
1

你打错了你的代码。您正在引用错误的课程。

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

固定代码：

    $('.heroes').hover(function() { 
    var hero = $(this).attr('alt'); 
    $('#container').text(hero); 
}, function() { 
    $('#container').text(""); 
});
于 2012-05-29T11:37:13.817 回答
1 
$('.heroes').hover(
 function() {
    var hero = $(this).attr('alt');
    $('#container').text(hero);
},
function() {
    $('#container').text("");}
});
于 2012-05-29T11:37:33.823 回答
0

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

通过了错误的课程，即正确的课程是.heroes

代码

$('.heroes').hover(function() {
    var hero = $(this).attr('alt');
    $('#container').text(hero);
}, function() {
    $('#container').text("");
});​
于 2012-05-29T11:38:36.397 回答
0

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

于 2012-05-29T11:40:21.287 回答
0

如果您可以接受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>
于 2012-05-29T13:01:45.710 回答