Question

我要完成的工作是使用.hover（）方法，addClass和removeClass将鼠标悬停在另一个上时使div可见。但是发生的是，当我将鼠标悬停在添加的div上时，它显示我不再将鼠标悬停在.hover（）方法中指定的div上（或者至少是我所假设的）。这将导致div反复在屏幕上闪烁。我该如何解决，这样才不会发生此问题？这是代码：

JS

$(document).ready(function(){


$('.building').hover(




    function(){

    var my_id = $(this).attr('id');

    var my_balloon ="#" + my_id + '_balloon';

    //console.log(my_balloon);

    $(my_balloon).addClass('active');

    }, 


    function(){


    var my_id = $(this).attr('id');

    var my_balloon ="#" + my_id + '_balloon';

    //console.log(my_balloon);

    $(my_balloon).removeClass('active');



    }





    );



  });

Answer 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function abc() {

         document.getElementById("Div2").style.display="";
}
</script>
</head>
<body>
<div onmouseover="abc()">Div1</div>
<div id="Div2" style="display:none">Div2</div>
</body>
</html>

Answer 2

如果气球与Div重叠，则会捕获事件“ onmouseover”。

如果不必处理它，可以使用css规则来阻止任何操作

.balloon {
  pointer-events: none;
}

此规则允许事件通过气球，就好像它不存在一样。

我如何解决这个jQuery故障，以便在使用.hover（）时div不会消失？

2 个答案: