Question

这是How to click through objects和How to click through objects that disappear

的进一步延续

此问题与How to click through objects that disappear有很大关系，只需稍加修改。

在上面的问题中，顶部的对象完全覆盖了其他四个框。但是如果你不这样做呢？

意思是，如果你有四个盒子，顶部的alpha: .5与其他四个盒子的中心尺寸相同，你希望能够将鼠标悬停在最后一个盒子上，这样就不会可见，并且当您将光标移开时，您可以在和之前单击它所在的位置，中间框将返回到其原始状态（alpha: .5 ）。

以下是您实施它的地方：

$(function() {

  $("#box_a").click(function() {
    alert("you clicked box_a");
  });

  $("#box_b").click(function() {
    alert("you clicked box_b");
  });

  $("#box_c").click(function() {
    alert("you clicked box_c");
  });

  $("#box_d").click(function() {
    alert("you clicked box_d");
  });

  $("#box_e").click(function() {
    alert("you clicked box_e(this shouldn't happen!)");
  }).mouseenter(function() {
    $(this).fadeTo(0,0).addClass("noevents");
  });

  $(".box").mouseleave(function(e) {
    if(e.relatedTarget.className != 'box') {
      $("#box_e").fadeTo(0,0.5).removeClass("noevents");
    }
  })
});

#box_a, #box_b, #box_c, #box_d {
 height: 100px;
 width: 100px;
 position: relative;
}

#box_a {
 top:0px;
 left:0px;
 background-color: red;
}

#box_b {
 top:-100px;
 left:100px;
 background-color: blue;
}

#box_c {
 top:-100px;
 left:0px;
 background-color: yellow;
}

#box_d {
 top:-200px;
 left:100px;
 background-color: green;
}

#box_e {
 width:100px;
 height:100px;
 top:-350px;
 left:50px;
 background-color: black;
 opacity: .5;
 position: relative;
}

.noevents {
 pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box_a" class="box"></div>
<div id="box_b" class="box"></div>
<div id="box_c" class="box"></div>
<div id="box_d" class="box"></div>
<div id="box_e"></div>

正如您所看到的，此代码运行良好，但是当您离开中间框所在的区域时，#box_e不会返回，实际上它不会返回{{1直到你的光标没有超过四个框中的任何一个，这不是应该发生的事情。应该发生的情况是，当您离开alpha: .5“”#box_e的区域时，如果您的光标位于任何位置之上，则应返回#box_e 偶然其他盒子。

修改

尝试进行此操作，使其对于此特定示例仅不起作用。您的答案必须可灵活应对alpha: .5所需的位置。假设#box_e比这个极简主义示例中的像素低一个像素，那么我必须完全修改所有内容，这不是此处的目标。

Answer 1

这是一种方法，跟踪鼠标的位置（在这种情况下，只有当它超过方框时才能降低对性能的影响）并检查它是否在中心元素的位置之外：

Demo

$(function() {

var box = $('#box_e'),
w = box.outerWidth(),
h = box.outerHeight(),
xmin = box.offset().left,
xmax = xmin + w,
ymin = box.offset().top,
ymax = ymin + h;

box.mouseenter(function() {

    $(this).fadeTo(0,0).addClass('noevents');
});

$('.box').mousemove(function(e) {

    if (elementOut(e) && box.hasClass('noevents')) {
    box.fadeTo(0,0.5).removeClass('noevents');
    }
});

function elementOut(e) {

var x = e.pageX, y = e.pageY,
onelement = x >= xmin && x <= xmax && y >= ymin && y <= ymax;

return !onelement;
}
});

Answer 2

我认为对于这个问题你也可以使用指针事件属性..

您可以在悬停盒子时更改属性，然后在开箱即可再次更改。

如何单击未完全覆盖背景的对象并在悬停时消失

2 个答案: