How to use the hover method and toggle method in jQuery

jQuery is widely used in front-end development, and there are many knowledge points about it. Today I will tell you, How to use the hover method and toggle method in jQuery, For those who are learning jQuery, Come and take a look.

jQuery provides some methods (such as: toggle) to merge two event effects together, such as: mouseover, mouseout; keyup, keydown, etc.

1. Hover function

hover(over,out) A method that simulates hover events (the mouse moves over and out of an object). This is a custom method that provides a "keep in it" state for frequently used tasks.
Parameters:
over (Function): The function to be triggered when the mouse moves over the element.
out (Function): The function to be triggered when the mouse moves out of the element.

The code is as follows:

 <script type="text/javascript">
 $(function(){
     $("#panel h5.head").hover(function(){
         $(this).next().show();// 鼠标悬浮时触发
    },function(){
         $(this).next().hide();// 鼠标离开时触发
    })
 })
 </script>

2. toggle function

toggle(fn,fn) switches the function to be called every time it is clicked. If a matching element is clicked, the first function specified is triggered, and when the same element is clicked again, the second function specified is triggered. Each subsequent click repeats the call to these two functions in turn. Can be deleted using unbind("click").

The code is as follows:

<script type="text/javascript">
 $(function(){
     $("#panel h5.head").toggle(function(){
         $(this).next().show();// 第一次点击时触发
    },function(){
         $(this).next().hide();// 第二次点击时触发，之后不停的切换
    })
 })
 </script>

toggle() method switches the visible state of the element.
If the selected elements are visible, then hide these elements. If the selected elements are hidden, then display these elements. The toggle() method switches the visible state of an element.
If the selected elements are visible, then hide these elements. If the selected elements are hidden, then display these elements.

So the above code can also be written as:

The code is as follows:

<script type="text/javascript">
 $(function(){
     $("#panel h5.head").toggle(function(){
          $(this).next().toggle();
     },function(){
          $(this).next().toggle();
     })
 })
 /*$(function(){
     $("#panel h5.head").click(function(){
          $(this).next().toggle();
     })
 })*/
 </script>

You can also add some css styles:

The code is as follows:

<style type="text/css">
 .highlight{ background:#FF3300; }
 </style>
 <script type="text/javascript">
 $(function(){
     $("#panel h5.head").toggle(function(){//配合css样式使用
        $(this).addClass("highlight");
         $(this).next().show();
     },function(){
         $(this).removeClass("highlight");
         $(this).next().hide();
     });
 })
</script>

Do you have a new understanding of the common hover events and toggle events in jQuery? I hope this article can bring you some help.

The above is the detailed content of How to use the hover method and toggle method in jQuery. For more information, please follow other related articles on the PHP Chinese website!