Question

当我输入和离开元素时，我正在使用“ mouseenter”和“ mouseleave”来更改图像的可见性。我的问题是，即使我在元素中，这些事件仍会触发。使用'pointer-events = none'可以，但是它会关闭图像上的另一个动画。有没有解决方案，既不使用指针事件也不使用mousenter / leave，并且允许我在图像上制作动画？ DEMO

HTML：

<img id="image" src=""/>
<div id='box' class="box"></div>

CSS：

.box {
    border: 2px solid red;
    height: 400px;
    width: 60%;
    margin: 10px auto;
}

#image {
    position:absolute;
    width: 60px;
    height: 60px;
    display: none;   
}

JS：

$(document).mousemove(function(e){
    const height = $('#image').height() / 2;
    const width = $('#image').width() / 2;
    $("#image").css({
        left:e.pageX-width, 
        top:e.pageY-height
    });
});

$('.box').mouseenter(_=> {
    $('#image').show();
});

$('.box').mouseleave(_=> {
    $('#image').hide();
});

Answer 1

我不确定这是否能满足您的要求-但您可以更改图像的z-index和父容器的background，例如：

$(document).mousemove(function(e){
    const height = $('#image').height() / 2;
    const width = $('#image').width() / 2;
    $("#image").css({
        left:e.pageX-width, 
        top:e.pageY-height
    });
});

let entries = 0;
let exits = 0

$('.box').mouseenter(_=> {
    $('#image').show();
    entries += 1;
    document.getElementById("entries").textContent=entries;
});
  
$('.box').mouseleave(_=> {
    $('#image').hide();
    exits += 1;
    document.getElementById("exits").textContent=exits;
});

	.box {
    border: 2px solid red;
    height: 400px;
    width: 60%;
    margin: 10px auto;
    background: transparent;
}
#image {
    position:absolute;
    width: 60px;
    height: 60px;
    display: none;
    z-index: -1;  
}

#display {
position: absolute;
top:0;
left: 0;
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="https://i5.walmartimages.ca/images/Large/580/6_r/875806_R.jpg"/>
<div id='box' class="box"></div>
<div id= 'display'>
  <div id= 'entries'>00</div>
  <div id= 'exits'>00</div>
</div>

即使图像位于光标下方，这也会导致.box始终位于顶部。

Answer 2

您是否尝试过设置一个值来指示图像的当前状态？

类似这样的东西：

var showImage = false;

$(document).mousemove(function(e){
    const height = $('#image').height() / 2;
    const width = $('#image').width() / 2;
    $("#image").css({
        left:e.pageX-width, 
        top:e.pageY-height
    });
});

$('.box').mouseenter(_=> {
    if (showImage)
        return;

    showImage = true;
    $('#image').show();
});

$('.box').mouseleave(_=> {
    showImage = false;
    $('#image').hide();
});

在不使用指针事件的情况下防止Mouseenter和Mouseleave触发

2 个答案: