CSSでホバーイベントを削除する方法

CSS ホバー イベントを削除する方法: 1. "$("a").hover(function(){alert('mouseover'); }, function(){ 「alert('mouseout'); })」メソッドを使用してホバー イベントをバインドします。 2. 「$('a').off('mouseenter').unbind('mouseleave');」メソッドを使用してホバー イベントのバインドを解除します。はい。

#このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター

CSS の hover イベント ?

jquery で hover イベントをキャンセルしてバインドする正しい方法

Web デザインでは、マウス ホバーに応答するために jquery を使用することがよくあります。マウスオーバー イベントとマウスアウト イベントは同じ効果がありますが、ホバー メソッドをバインドするには on をどのように使用しますか? イベントのバインドを解除するには off をどのように使用しますか?

1. ホバー イベントをバインドする方法

まず次のコードを見てください。クリックとホバー イベントを a タグにバインドするとします。

$(document).ready(function(){ $('a').on({ hover: function(e) {
 //Hover event handler
alert("hover"); },
click: function(e) { // Click event handler
alert("click"); } });
});

a タグがクリックされると、何か奇妙なことが起こります。バインドされたホバー イベントは応答しません。バインドされたクリック イベントは正常に応答できます。

ただし、記述方法を変更する場合は、たとえば:

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

代わりに、mouseenter イベントと Mouseleave イベントを使用する必要があります (これも .関数で使用される hover( ) イベント)

したがって、次のように直接引用できます:

$(document).ready(function(){ $('a').on({ mouseenter: function(e) {
//Hover event handler
alert("mouseover"); }, mouseleave: function(e) {
//Hover event handler
alert("mouseout"); }, click: function(e) {
// Clickevent handler
alert("click"); } });
});

.hover() は jQuery 自体によって定義されたイベントであるため、ユーザーがbind して、mouseenter を呼び出すと、これは単なる Mouseleave イベントです。実際のイベントではないため、.on() のイベント パラメーターとして呼び出すことはできません。

2. ホバー イベントをキャンセルする方法

ご存知のように、off 関数はバインドされたイベントをキャンセルするために使用されますが、バインドを介してバインドされたイベントのみをキャンセルできます。jquery の hover イベントは非常に特殊です。イベントがこの中でバインドされている場合、

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

バインドされたホバー イベントをキャンセルする正しい方法:

$('a').off('mouseenter').unbind('mouseleave');

推奨学習: "

css ビデオ チュートリアル " "jQueryビデオチュートリアル"

以上がCSSでホバーイベントを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。