1.解决办法：改为js的mouseenter和mouseleave事件；
2.原因：经定位，是鼠标多次任意点击元素时，进入到了mouseleave事件中（鼠标点击时是在元素上的，不应该进入mouseleave中），所以才导致了hover失效。
3.代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
padding: 20px;
background: #F00;
}
/* .box:hover p
{
opacity: 1;
} */
.box p {
position: relative;
display: block;
opacity: 0;
width: 200px;
height: 200px;
background: #000;
}
.box.hoverClass p {
opacity: 1;
}
</style>
</head>
<body>
<p>opacity在不为1的时候会创建层叠上下文</p>
<div class="box" id="box">
<p class="hoverClass">嘿嘿</p>
</div>
<script>
let ele = document.getElementById("box"),
img = document.getElementsByTagName("p")[0];
let mouseOverFlag = false;
ele.addEventListener("click", function(e) {
mouseOverFlag = false;
});
ele.addEventListener("mousemove", function(e) {
mouseOverFlag = true;
});
ele.addEventListener("mouseenter", function(e) {
mouseOverFlag = true;
console.log('mouseenter');
if (!ele.classList.contains("hoverClass")) {
ele.classList.add("hoverClass");
}
});
ele.addEventListener("mouseleave", function(e) {
if (mouseOverFlag) {
console.log('mouseleave');
if (ele.classList.contains("hoverClass")) {
ele.classList.remove("hoverClass");
}
}
});
</script>
</body>
</html>