0

このフィドルを見てください

マウスをリンクの上に正確に置くと、別のリンクが表示されます。ただし、リンクの左または右にカーソルを合わせると、別のテキストも表示されます。正確なリンクにホバーされている場合にのみ、ホバー効果を作りたいです。

これどうやってするの？

私のHTMLコード:

<ul id="nav">
    <li id="a1"><a href="#">original link 1</a></li>
    <li id="a2" class="hack"><a href="#">hover link 1</a></li>
    <li id="b1"><a href="#">original link 2</a></li>
    <li id="b2" class="hack"><a href="#">hover link 2</a></li>
    <li id="c1"><a href="#">original link 3</a></li>
    <li id="c2" class="hack"><a href="#">hover link 3</a></li>
</ul>

私のJavascriptコード:

$('.hack').hide();
$("#nav li").mouseenter(function() {
    $('#' +this.id.charAt(0)+"2").show();
    $('#' +this.id.charAt(0)+"1").hide();
  }).mouseleave(function() {
    $('#' +this.id.charAt(0)+"1").show();
    $('#' +this.id.charAt(0)+"2").hide();
  });

私が言及している効果を確認するには、フィドルを参照してください。

4

4 に答える 4

1

mouseenter イベントショートカットを使用する代わりに、イベント委譲を使用して、このように要素にイベントを追加するとよいでしょう"a"...

$("#nav li").on({
    "mouseenter" : function() { },
    "mouseleave" : function() { }
}, "a");
于 2013-04-10T01:03:33.693 に答える
0

次のことを試してください。

$('.hack').hide();
$("#nav li a").mouseenter(function() {
    $('#' +this.parentNode.id.charAt(0)+"2").show();
    $('#' +this.parentNode.id.charAt(0)+"1").hide();
  }).mouseleave(function() {
    $('#' +this.parentNode.id.charAt(0)+"1").show();
    $('#' +this.parentNode.id.charAt(0)+"2").hide();
});

s 自体ではなくhover、タグでイベントを開始します。ali

例

于 2013-04-10T01:03:41.993 に答える
0

フィドルを更新したと思います。このスタイルを追加しました：

#nav li {
  display: inline-block;
}
于 2013-04-10T01:04:42.827 に答える
0

js で、"#nav li a"代わりに関数をバインドします。

于 2013-04-10T01:06:14.963 に答える