如何单击不完全覆盖背景并在悬停时消失的对象 [英] How to click through an object that doesn't completely cover the background and disappear on hover
问题描述
该问题与如何点击消失的对象，稍作修改.
在上面的问题中，最上面的对象完全覆盖了其他四个框.但是，如果不这样做怎么办?
意思是，如果您有四个框，顶部有一个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不会返回，并且实际上直到您将其返回到alpha: .5时，光标不在四个方框中的任何一个上方，这不是应该发生的情况.应该发生的情况是，当光标离开任何其他框的顶部时，当离开#box_e是"的区域时，#box_e应该回到alpha: .5 甚至./p>
编辑
请尝试执行此操作，以使其在本特定示例中仅不起作用.您的答案必须必须灵活地放置在我需要放置#box_e的位置.假设#box_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');
});
$('.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;
}
});
This is an even further continuation to How to click through objects and to How to click through objects that disappear
This question is much related to How to click through objects that disappear, with a small modification.
In the question above, the object that was on top, covered completely the other four boxes. But what if you don't?
Meaning, what if you have four boxes, an alpha: .5 on top which is the same size that the other four which is centered, and you want to be able to hover over the last box so that it is not visible, and you're able to click in the place where it was before and when you move your cursor out of the way, the middle box will go back to it's original state(alpha: .5).
And here is where you're implementing it:
$(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>
As you can see, this code works pretty well, except that when you leave the area where middle box should be, the #box_e does not come back, and actually it doesn't go back to alpha: .5 until your cursor is not over any of the four boxes, which is not what should happen. What should happen is that when you leave the area of where #box_e "is" #box_e should go back to alpha: .5 EVEN if your cursor is on top of any of the other boxes.
EDIT
Try to make this so that it doesn't work just for this specific example. Your answer MUST be flexible to where ever I'm needing to put #box_e. Let's say that #box_e is one pixel below what it is in this minimalist example, then I would have to modify absolutely everything, which is not the goal here.
Here's a way, keeping track of where the mouse is (in this case only when it's over the boxes to keep down the impact on performance) and checking if it is outside of where the center element should be :
$(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;
}
});
这篇关于如何单击不完全覆盖背景并在悬停时消失的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
