jqueryはliのマウスオーバーを設定します

jQuery は、HTML ドキュメントと CSS スタイルを簡単に操作できるようにする人気の JavaScript ライブラリです。 jQuery を使用する場合、マウスオーバー (マウスイン) やマウスアウト (マウスアウト) などのマウスイベントを設定する必要があることがよくあります。この記事ではjQueryを使ってliのmouseoverイベントを設定する方法を紹介します。

1. HTML ドキュメントの準備

まず、以下に示すように、いくつかの li 要素を含む HTML ドキュメントを準備する必要があります。 jQuery ライブラリ

2. HTML ドキュメントの 93f0f5c25f18dab9d176bd4f6de5d30e タグに、jQuery ライブラリを導入する次のコードを追加します:

<ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

ここでは CDN リンクが使用されていることに注意してください。ページの読み込みを高速化します。

jQuery コードの作成

3. 次に、jQuery を使用して li のマウスオーバー イベントを設定します。ページがロードされたら、すべての li 要素を選択し、mouseover メソッドを使用してイベント ハンドラーを追加します。

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

このコードの意味は、ドキュメントがロードされた後、すべての li 要素を選択し、マウスを移動することです。背景色を黄色に設定します。 $(this) は現在の li 要素を表します。

テスト効果

4. 完全なコードを HTML ドキュメントに貼り付けて、ブラウザーでページを開きます。マウスを li 要素の上に移動すると、要素の背景色が黄色に変わります。

<script>
$(document).ready(function(){
  $('li').mouseover(function(){
    $(this).css('background-color', 'yellow');
  });
});
</script>

mouseout イベントの追加

5. mouseover イベントに加えて、mouseout イベントも追加できます。これは、マウスが離れたときにトリガーされるイベントです。要素。上記のコードでは、mouseover イベントに Mouseout イベントを追加できます。

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('li').mouseover(function(){
        $(this).css('background-color', 'yellow');
      });
    });
  </script>


  

    
选项1
    
选项2
    
选项3
  

このコードの意味は、マウスが li 要素内に移動したときに背景色を黄色に設定し、背景色を設定することです。マウスを外に出すと黄色になります。空白に戻ります。

完全なコード

6. 最終的な完全なコードは次のとおりです:

<script>
$(document).ready(function(){
  $('li').mouseover(function(){
    $(this).css('background-color', 'yellow');
  }).mouseout(function(){
    $(this).css('background-color', '');
  });
});
</script>

概要

7. この記事jQuery を使用して li のマウスオーバー イベントを設定し、マウスが移動したときに背景色を変更し、マウスが移動したときに背景色を復元する方法を説明します。この例を通じて、jQuery を使用してイベント ハンドラーを追加する方法と、CSS スタイルを使用して要素の外観を変更する方法を学ぶことができます。実際の Web サイト開発では、必要に応じてさまざまなマウス イベントやスタイル ルールを使用して、より複雑なインタラクティブな効果を実現できます。

以上がjqueryはliのマウスオーバーを設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。