主页 / 问题 / 1228435
Accepted
Organizer
Asked:2022-01-08 05:32:44 +0000 UTC2022-01-08 05:32:44 +0000 UTC

在块 JS/JQuery 下方定义悬停在块上

  • 772

任务是检测鼠标是否经过位于另一个块下方的块。

有2块

.front{
  position: absolute;
  top: 0;
  width: 200px;
    height: 200px;
  opacity: .2;
  background: blue;
}

.back{
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}
<div class="back"></div>
<div class="front"></div>

Normal mouseenter，当然，不会工作：

$('.back').mouseenter(()=>{console.log('+');});

不要提供较低的块克隆z-index，我自己猜到了，但这会激发很多额外的 html 代码，我不想这样做。一定有更聪明的东西......

构造函数：https ://jsfiddle.net/few1h534/1/

javascript

1 个回答

  1. Best Answer

    可以通过css属性pointer-events解决

    $('.back').mouseenter(()=>{console.log('+');});
    .front{
  position: absolute;
  top: 0;
  width: 200px;
    height: 200px;
  opacity: .2;
  background: blue;
  pointer-events:none;
}

.back{
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="back"></div>
<div class="front"></div>

    • 2

相关问题