0

ホバー時にリンクの「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/

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

If you can accept the alt text appearing next to the link, then:

<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 に答える
0

初期セレクターが正しくありません。.containerに変更.heroes

于 2012-05-29T11:40:21.287 に答える
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 に答える