滑鼠多次任意點選元素，css的hover失效的解決辦法
阿新 • • 發佈：2018-11-07
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>