如何在不通过窗口对象退出元素的同时单击没有完全覆盖背景的对象并在悬停时消失

Question

  

此问题与How to click through an object that doesn't completely cover the background and disappear on hover

有关但不相同      

重要提示 - 请查看上面包含背景信息的问题，否则您很可能无法理解这个问题是什么

如果您阅读上述问题，您就会明白接受的答案有效，即：

$(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;
}
});

当然，除非你有一些背景知识，否则所有这一切都毫无意义。最初的问题是，＆＃34;如何点击不完全覆盖背景的对象并在悬停时消失＆＃34;，这意味着无论何时将鼠标悬停在此div上，它都会消失，并且您将能够触发隐藏在对象后面的事件。

这个小小的片段非常强大，这是一个演示：

＆＃13;

＆＃13;

$(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;
}
});

＆＃13;

#box_a, #box_b, #box_c, #box_d {
  height: 100px;
  width: 100px;
  position: absolute;
}

#box_a {
  top: 0px;
  left: 0px;
  background-color: red;
}

#box_b {
  top: 0px;
  left: 100px;
  background-color: blue;
}

#box_c {
  top: 100px;
  left: 0px;
  background-color: yellow;
}

#box_d {
  top: 100px;
  left: 100px;
  background-color: green;
}

#box_e {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: black;
  opacity: .5;
}

.noevents {
  pointer-events: none;
}

＆＃13;

<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>

<!--
red   ,  blue
yellow, green
-->

＆＃13;

＆＃13;

＆＃13;

完美地描述和回答了这个问题。但是有一个小小的错误。

考虑这个新片段：

＆＃13;

＆＃13;

$(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;
}
});

＆＃13;

#box_a, #box_b, #box_c, #box_d {
  height: 100px;
  width: 100px;
  position: absolute;
}

#box_a {
  top: 0px;
  left: 0px;
  background-color: red;
}

#box_b {
  top: 0px;
  left: 100px;
  background-color: blue;
}

#box_c {
  top: 100px;
  left: 0px;
  background-color: yellow;
}

#box_d {
  top: 100px;
  left: 100px;
  background-color: green;
}

#box_e {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: black;
  opacity: .5;
}

.noevents {
  pointer-events: none;
}

＆＃13;

<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>

<!--
red   ,  blue
yellow, green
-->

＆＃13;

＆＃13;

＆＃13;

请注意，它是相同的，但缺少框b。另外，请注意当您进入透明框时，同一个框会消失。如果您通过其中一个方框退出，则透明框自动＆＃34;再次出现。但是如果你从DOM对象窗口的右上角退出透明框，那么在你将鼠标悬停在三个框之一上之前，框不会再出现。

这是一个小错误，但毕竟很重要。

此外，两个代码段的JS和CSS ＆＃34;完全＆＃34; 相同。

Answer 1

根据我的理解，你想要的东西如下。

由于此$('.box').mousemove(function(e)而离开鼠标时，透明框不会再次出现。当你在.box上移动鼠标时，它会改变它的不透明度。

当您离开透明框的鼠标时，将其更改为$(window).mousemove(function(e) {将再次显示透明框。

$(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');
});

$(window).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;
}
});

#box_a, #box_b, #box_c, #box_d {
  height: 100px;
  width: 100px;
  position: absolute;
}

#box_a {
  top: 0px;
  left: 0px;
  background-color: red;
}

#box_b {
  top: 0px;
  left: 100px;
  background-color: blue;
}

#box_c {
  top: 100px;
  left: 0px;
  background-color: yellow;
}

#box_d {
  top: 100px;
  left: 100px;
  background-color: green;
}

#box_e {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: black;
  opacity: .5;
}

.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>

<!--
red   ,  blue
yellow, green
-->