Div sets the hover style and sets the hover event in jq. Multiple quick clicks of div after the mouse hover div will trigger the hover failure problem.

div sets the hover style, and the hover event is set in jq. Clicking div after the mouse hover div will trigger hover invalidation. How to solve this problem?

< html lang= "en" >
< head >

<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">
    .box-div {
        display: flex;
        width: 200px;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(220, 220, 220, 1);

        width: 200px;
        height: 200px;
        display: none;
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
        position: relative;
        position: absolute;

        display: block;


<script type="text/javascript">

< / head >
< body >

<div class="box-div">
    <div class="box-footer div-one active">


</div> <div class="box-footer div-two"><label>div<input type="checkbox"/></label></div> </div>

< / body >
< / html >

The complete code is like this. I hope div
with a check box appears when the mouse is moved in, but after the mouse is moved in, I click the check box several times or div occasionally triggers the mouse move event

I recommend using JS to listen for mouse events

$('.ele'). On ('mouseenter',function () {


followed by mousedown (mouse down) mouseout (mouse move out) and so on

can you send the invalid effect picture? what else is the useful browser? I copied your code without the problem you mentioned above

Why not use css's: hover