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

    .box-footer{
        width: 200px;
        height: 200px;
        display: none;
    }
    .box-footer:hover{
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
    }
    .div-one{
        position: relative;
    }
    .div-two{
        position: absolute;
    }

    .active{
        display: block;
    }

</style>

<script type="text/javascript">
    $(document).ready(function(){
        $(".box-div").hover(function(){
            $(this).find(".div-one").removeClass("active");
            $(this).find(".div-two").addClass("active");
        },function(){
            $(this).find(".div-two").removeClass("active");
            $(this).find(".div-one").addClass("active");
        })
    })
</script>

< / head >
< body >

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

< / body >
< / html >