jQueryでホバーを設定する方法-フロントエンドQ&A-php.cn

jQueryでホバーを設定する方法

王林

リリース： 2023-05-23 09:00:11

オリジナル

4624 人が閲覧しました

フロントエンド開発では、通常、Web ページ上の要素はユーザーのマウスと対話する必要があります。最も一般的なのはホバー効果です。要素の上にマウスを置くと、要素は次のような視覚的な変化を起こします。色、サイズなど現時点では、これを実現するには jQuery の hover メソッドを使用する必要があります。

jQueryのhoverメソッドを使ってホバー効果を設定する方法を詳しく紹介します。

1. jQuery の hover() メソッドの基本構文

まず、hover() メソッドの基本構文を理解する必要があります:

$(selector).hover(inFunction,outFunction)

ログイン後にコピー

その中で、 selector は選択された 1 つの要素、inFunction はマウスが要素上に移動したときに実行される関数、outFunction はマウスが要素の外に移動したときに実行される関数です。 hover() メソッドを使用すると、マウスが要素の内外に移動するときにさまざまな関数を実行できることがわかります。

2. hover() メソッドを使用してホバー効果を設定する

次に、hover() メソッドを使用してホバー効果を設定する方法を示します。

まず、jQuery ライブラリをページに導入する必要があります:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

ログイン後にコピー

次に、サンプル要素を作成し、いくつかの CSS スタイルを追加します:

<div class="example">hover me</div>

<style>
.example {
    width: 100px;
    height: 50px;
    background-color: #FFC0CB;
    border-radius: 10px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    cursor: pointer;
}
</style>

ログイン後にコピー

次に、このサンプル要素はホバー効果を設定します。マウスが内側に移動すると、背景色が変更され、テキストの内容が変更され、マウスが外側に移動すると、要素は初期状態に戻ります。

<script>
$(function() {
    $(".example").hover(function() {
        // 鼠标移入时执行的函数
        $(this).css("background-color", "#ffc73d");
        $(this).text("hovered");
    }, function() {
        // 鼠标移出时执行的函数
        $(this).css("background-color", "#FFC0CB");
        $(this).text("hover me");
    });
});
</script>

ログイン後にコピー

上記のコードの説明:

$() 関数は要素の選択に使用されます。ここでは、クラスの例を持つ要素が選択されています。
hover()メソッド 2 つの関数を渡します。最初の関数はマウスが内側に移動したときに実行される関数で、2 番目の関数はマウスが外側に移動したときに実行される関数です。
要素のスタイルを変更します。この2つの機能です。

このようにして、単純なホバー効果が実現されます。

3. hover() メソッドのその他の用途

上記の用途に加えて、hover() メソッドには他の用途もあります。

hover(handlerInOut)

この使用法では関数を渡すだけでよく、この関数はマウスの移動とマウスのハンドラー関数として設定されます。 -アウトイベントも同時に行います。例:

$(function() {
    $(".example").hover(function() {
        $(this).css("background-color", "#ffc73d");
    });
});

ログイン後にコピー

このように、マウスが .example 要素内に移動すると、背景色が #ffc73d に変わります。削除しても変化はありません。

hover(enterHandler,leaveHandler)

この使用法は、関数のパラメーターの位置が異なることを除いて、hover(inFunction,outFunction) と似ています。例:

$(function() {
    $(".example").hover(function() {
        $(this).css("background-color", "#ffc73d");
    }, function() {
        $(this).css("background-color", "#FFC0CB");
    });
});

ログイン後にコピー

このように、マウスが .example 要素内に移動すると、背景色が #ffc73d に変わります。外すと元に戻ります。

4. まとめ

上記は、jQuery の hover() メソッドを使用してホバー効果を設定する方法です。これを使用する場合は、効果を設定する要素を選択し、hover() メソッドを通じて対応する関数を渡すだけです。

もちろん、実際の開発では、アニメーション効果などのより複雑なホバー効果も必要になる場合があります。この場合、jQuery は強力なアニメーション効果ライブラリを提供しており、これを使用してより豊かなホバー効果を実現できます。

一般的に、jQuery が提供する hover() メソッドは、Web ページ要素のホバー効果を迅速かつ効果的に実現できます。これにより、フロントエンド開発の効率が大幅に向上し、開発者は Web ページ要素の実装により集中できるようになります。ビジネスの論理。

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