Home > Article > Web Front-end > 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?

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?

黄舟Original: 2017-06-28 11:25:441296browse

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");	
});

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()

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>

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");
}
);

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery event mouseover and mouseout event delay triggering problem when moving quicklyNext article：jQuery event mouseover and mouseout event delay triggering problem when moving quickly

See more

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?

Related articles