When jquery mouse leaves mouseout, a transaction will be processed. How to exclude the mouse from being affected when it is in the child element?-JS Tutorial-php.cn

When jquery mouse leaves mouseout, a transaction will be processed. How to exclude the mouse from being affected when it is in the child element?

黄舟

Release： 2017-06-28 11:25:44

Original

1345 people have browsed it

jquery will process a transaction when the mouse leaves (mouseout), but how to exclude the mouse from being on a child element without affecting the

<div class="a"><div class="a1" style="display:none;"></div></div>
jquery中有mouseout离开时
$(".a").hover(function(){
$(this).find(".a1").css("display","block");
});	
$(".a").mouseout(function(){
$(this).find(".a1").css("display","none");	
});

Copy after login

above. When the mouse is on its child element, it is equivalent to leaving the current DIV. How can this be avoided?

You can use jQuery event - mouseleave() method to achieve this effect.

Definition and Usage

When the mouse pointer leaves an element, the mouseleave event occurs.

This event is most often used together with the mouseenter event.

The mouseleave() method triggers the mouseleave event, or specifies a function to run when the mouseleave event occurs.

Note: Unlike the mouseout event, the mouseleave event will only be triggered when the mouse pointer leaves the selected element. If the mouse pointer leaves any child element, the mouseout event will also be triggered. See the example below for a demonstration.

Grammar

$(selector).mouseleave()

Copy after login

Example

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
    x=0;
    y=0;
    $(document).ready(function(){
          $("div.out").mouseout(function(){
                $(".out span").text(x+=1);
          });
          $("div.leave").mouseleave(function(){
                $(".leave span").text(y+=1);
          });
    });
</script>
</head>
<body>
    <p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
    <p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
    <div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
        <h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
    </div>
    <div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
        <h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
    </div>
</body>
</html>

Copy after login

Is it necessary to do this when there is only one function upstairs? Change the code to the following

$(".a").hover(
function(){
$(this).find(".a1").css("display","block");
},
function(){
$(this).find(".a1").css("display","none");
}
);

Copy after login

$(".a").mouseover(function(){
$(this).find(".a1").css("display","block");
});
$(".a").mouseleave(function(){
$(this).find(".a1").css("display","none");
});

Copy after login

The above is the detailed content of When jquery mouse leaves mouseout, a transaction will be processed. How to exclude the mouse from being affected when it is in the child element?. For more information, please follow other related articles on the PHP Chinese website!