Div set hover style, click div after the mouse hover div will trigger hover failure, how to solve?

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?

  1. html page code

    .box-div{
        width: 200px;
        height: 200px;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(220, 220, 220, 1);
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
    }
    
    .box-div:hover{
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
    }
Jan.11,2022

the test did not find your problem
you can post the complete code or write the hover code in css directly into the hover event of jq


I don't quite understand it. It means that if you want to click with hover style, you can add visited style and active style
/ / the style when you click on the element
.box-div:visited {

box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);

}
/ / style
.box-div:active {

when the mouse is pressed over the element before it is released
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);

}
in addition, visited had better be written on hover

Menu