0

ホバーイベントとホバーイベントの削除の両方を行いたいのですが。このイベントを持つノードは動的に追加されるので、on（）を使用したいと思います。ホバーイベントを追加すると、うまく機能します（以下の＃2番目のリスト）。何らかの理由で、オフホバーイベントを追加すると、追加ホバーイベントでさえ機能しません（以下の#firstリスト）。

手がかりを提供してください。実例はhttp://jsfiddle.net/NV7hR/にあります

ありがとう

$(document).ready(function() {
  $("#first").on("hover", "a", function(event) {
    $(this).parent().css("background-color", "yellow");
  }, function(event) {
    $(this).parent().css("background-color", "");
  });
  $("#second").on("hover", "a", function(event) {
    $(this).parent().css("background-color", "yellow");
  });
});

<body>
<ul id="first">
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
</ul>
<ul id="second">
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
</ul>
</body>
4

3 に答える 3

4

ホバーをmouseenterとmouseleaveに分割します。これは、とにかくホバーの省略形です。

$("#first").on("mouseenter", "a", function(event) {
   $(this).parent().css("background-color", "yellow");
}).on("mouseleave", "a", function(event) {
   $(this).parent().css("background-color", "");
});
于 2012-04-09T19:38:03.317 に答える
3

.hoverそれ自体はイベントではありません。とイベントhoverの省略形です。以下のように使用してみてください、mouseentermouseleave

デモ

$("#first").on({
    mouseenter: function() {
        $(this).parent().css("background-color", "yellow");
    },
    mouseleave: function() {
        $(this).parent().css("background-color", "");
    }
}, 'a');
于 2012-04-09T19:41:09.400 に答える
2

他の誰もが主張していることにもかかわらず、あなたは確かにで使用することができ'hover'ます.on()。

2つの関数を渡すことができないというだけです。イベントタイプをテストする必要があります。

$("#first").on("hover", "a", function(e) {
    $(this).css("background-color", e.type === 'mouseenter' ? "yellow" : '');
});

デモ：http： //jsfiddle.net/HxuuS/

参考までに、2つの関数を渡すとまったく機能しなくなったのは、最初のハンドラーがdataへのオプションの引数として解釈されたため、バインドされていたonのは2番目のハンドラー（mouseleave1つ）だけだったためです。

于 2012-04-09T19:47:49.390 に答える