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

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

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

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

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

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

ログイン後にコピー

jQuery コードの作成

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

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

ログイン後にコピー

テスト効果

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
  

ログイン後にコピー

完全なコード

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 サイトの他の関連記事を参照してください。