0

マウスがリンクの上に置かれると、効果Xが発生するとします。マウスが離れたときに元に戻すにはどうすればよいですか?

たとえば、javascript を使用してリンクの動作を変更しようとしました。マウスをホバリングするとリンクが変更されますが、変更を元に戻すにはどうすればよいですか?

HTML コード:

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

Javascript コード:

$("#nav a li").hover(function () {
     $('#' +this.id.charAt(0)+"1").hide();
});
4

4 に答える 4

2

HTML マークアップを修正した後、代わりに CSS を使用してください。これにより、パフォーマンスが向上し、コードが少なくなり、視覚的な詳細は CSS に任せる必要があるため、より「適切」になります。

#nav li:hover {
  display: none;
}

更新:あなたのマークアップをさらに理解しようとすると、あなたが何をしようとしているのかがよくわかります。<li>次の要素を非表示にしたいようです。その場合は、CSS 隣接セレクターを使用します。

#nav li:hover + li {
  display: none;
}
于 2013-04-09T19:17:50.980 に答える
1

試す

 $("#nav a li").on('hover', function () {
   //mousehover
 } , function(){
   //mouseout
 } );
于 2013-04-09T19:18:00.940 に答える
0

ホバーの代わりにmouseover と mouseout jQueryを使用する

于 2013-04-09T19:18:35.240 に答える
0

あなたが書いたコードは$(selector).on("mouseenter mouseleave", handlerInOut);

有効なマークアップを使用...

<ul id="nav">
    <li><a href="#">hover link 1</a></li>
    <li><a href="#">hover link 2</a></li>
</ul>

JQuery

$("#nav a li").hover(function () {
     $('#' +this.id.charAt(0)+"1").hide();
 }, function() {
     $('#' +this.id.charAt(0)+"1").show();
});

jQuery API ドキュメントから: http://api.jquery.com/hover/

$(selector).hover(handlerIn, handlerOut) の呼び出しは、次の省略形です: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

于 2013-04-09T19:18:35.220 に答える