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

Question

This question is related to but not the same as How to click through an object that doesn't completely cover the background and disappear on hover

IMPORTANT - Please take a look at the question above which contains background info, or you will most likely not understand what this question is about

如果您阅读了上面的问题，您就会明白接受的答案是有效的，即:

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

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

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

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

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

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

考虑这个新片段:

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

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

请注意，这是同一件事，但缺少方框 b。另外，请注意当您进入透明框时，同一个透明框会消失。如果您通过其中一个盒子退出，透明盒子会“自动”再次出现。但是，如果您通过 DOM 对象为 window 的右上角退出透明框，则该框不会再次出现，直到您将鼠标悬停在三个框之一上。

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

此外，两个代码段的 JS 和 CSS “完全”相同。

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