JQueryを使用してマウスの動きで要素を非表示にする方法

JQuery は、一般的な JS タスクを簡素化する多数の関数とメソッドを提供する、非常に人気のある JavaScript ライブラリです。 JQuery で要素を非表示にすることは、非常に一般的なタスクの 1 つです。ここでは、JQuery マウスを使用して非表示の要素を移動する方法を説明します。

JQuery には、HTML 要素を非表示にすることができる非常に便利なメソッド「hide()」が用意されています。複数の要素を非表示にする場合は、同じクラスを使用して要素を選択し、 Hide() メソッドを呼び出して非表示にします。

以下は例です:

HTML コード:

     <div class="box"><p>这是一个段落。</p></div>
     <div class="box"><p>这是另一个段落。</p></div>

CSS コード:

.box{
    padding:10px;
    background-color:#f1f1f1;
}

JS コード:

$('.box').hide();

上記コードでは、JQuery を使用して「box」クラスを持つすべての要素を選択し、 .hide() メソッドを呼び出してそれらを非表示にします。この時点でブラウザでページを表示しても、クラス「box」を持つすべての要素が非表示になっているため、何も表示されません。

しかし、これには問題があります。それらを再度表示するにはどうすればよいでしょうか? .show() メソッドを使用して要素を復元できます。ただし、ここでは、マウスの動きを使用して要素の非表示と表示を制御する、より単純な方法を使用します。

以下は例です:

HTML コード:

     <div class="box"><p>这是一个段落。</p></div>
     <div class="box"><p>这是另一个段落。</p></div>

CSS コード:

.box{
    padding:10px;
    background-color:#f1f1f1;
}

JS コード:

$('.box').mouseover(function(){
    $(this).hide();
}).mouseout(function(){
    $(this).show();
});

上記このコードでは、JQuery を使用して「box」クラスを持つすべての要素を選択し、マウス移動イベント (マウスオーバー) を登録します。マウスが要素上に移動すると、 Hide() メソッドが呼び出され、要素が非表示になります。マウスが離れると、要素を表示するために show() メソッドが呼び出されます。

このページをブラウザで表示すると、すべての要素が表示されます。ただし、要素の上にマウスを移動すると、その要素は非表示になります。マウスを遠ざけると、再び表示されます。

上記は、JQuery マウスを使用して非表示の要素を移動する方法です。この手法は、メニューやタブなどの多くの Web アプリケーションで使用できます。

以上がJQueryを使用してマウスの動きで要素を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。