jquery sets mouseover of li

jQuery is a popular JavaScript library that makes it easy to manipulate HTML documents and CSS styles. When using jQuery, you often need to set mouse events, such as mouseover (mouse in) and mouseout (mouse out). This article will introduce how to use jQuery to set the mouseover event of li.

1. Prepare HTML document

First, we need to prepare an HTML document containing some li elements, as shown below:

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

2. Introduction jQuery library

In the 93f0f5c25f18dab9d176bd4f6de5d30e tag of the HTML document, add the following code to introduce the jQuery library:

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

Note that CDN links are used here, which can speed up page loading. Faster.

3. Write jQuery code

Next, we use jQuery to set the mouseover event of li. After the page is loaded, select all li elements and use the mouseover method to add an event handler:

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

The meaning of this code is that after the document is loaded, select all li elements and move the mouse in Set the background color to yellow. $(this) represents the current li element.

4. Testing effect

We paste the complete code into the HTML document and then open the page in the browser. When the mouse moves over the li element, the background color of the element will change to yellow.

  <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
  

5. Add mouseout event

In addition to the mouseover event, we can also add the mouseout event, which is an event that is triggered when the mouse moves away from the element. In the above code, we can add the mouseout event in the mouseover event:

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

The meaning of this code is to set the background color to yellow when the mouse moves into the li element, and set the background color to yellow when the mouse moves out Revert to blank.

6. Complete code

The final complete code is as follows:

  <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');
      }).mouseout(function(){
        $(this).css('background-color', '');
      });
    });
  </script>


  

    
选项1
    
选项2
    
选项3
  

7. Summary

This article explains how Use jQuery to set the mouseover event of li, change the background color when the mouse moves in, and restore the background color when the mouse moves out. Through this example, we can learn how to use jQuery to add event handlers and how to use CSS styles to change the appearance of elements. In actual website development, we can use different mouse events and style rules as needed to achieve more complex interactive effects.

The above is the detailed content of jquery sets mouseover of li. For more information, please follow other related articles on the PHP Chinese website!