如何点击消失的对象 [英] How to click through objects that disappear
问题描述
此问题是如何点击通过对象的延续
如何单击一个对象，并使点击的对象消失（或 alpha：0 ）
此片段有四个小方块（全部具有不同的颜色），一个黑色透明的方块覆盖所有四个。
那么，当你指向 #box_a 时，你实际上是点击 #box_e 。那么，你可以在 #box_e 上使用 pointer-events：none 但是等一下，我也希望当鼠标移到 #box_e &'时， #box_e
现在很明显，我无法使用 指针事件：无 ，因为那时我的老鼠超过了对象。
这是我的代码（这是一个极简的例子）：
$（function（）{$（＃box_a）。click（function（）{alert（you clicked box_a）}）; （你点击box_b）}）; $（＃box_c）click（function（）{alert（you clicked box_c）}）; $（＃box_d）。 （你点击box_d）}）; $（＃box_e）click（function（）{alert（you clicked box_e（this should not happen！））}）;}）;
#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：200px; height：200px; top：-400px; left：0px;背景颜色：黑色;不透明度：.5;位置：相对; pointer-events：none}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script> ;<body> ;<div id =box_a>< / div>< div id =box_b>< / div>< div id =box_c>< / div>< div id =box_d>< / div>< div id =box_e>< / div>< / body>
您可以使用 mouseenter ， mouseleave code> addClass 覆盖div：
.noevents {
pointer-events：none;
}
$（'＃box_e'）mouseenter（function（）{
$（this）.fadeTo（0,0）.addClass（'noevents'）;
} ）;
$（'。box'）。mouseleave（function（）{
if（e.relatedTarget.className！='box'）$（'＃box_e'）。fadeTo ，0.5）.removeClass（'noevents'）;
}）
当鼠标离开较小的盒子 - 而不是进入另一个（这将导致闪烁）。只需要给盒子一个共同的类。
This question is a continuation of How to click through objects
How do you click through an object, and make the object you're clicking through disappear(or alpha:0)
This snippet has four small squares(all with different colors), and one black transparent one which covers all four.
So how can you make it so when you "point" at #box_a, you're actually clicking through #box_e. Well, you can use pointer-events: none on #box_e right? But wait a minute I also want #box_e to disappear when my mouse is over #box_e & to click through it!
By now it's probably evident that I cant use pointer-events: none because then I couldn't read when my mice is over the object in question. How would I do this?
Here is my code(This is a minimalist example):
$(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!)")
});
});
#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:200px;
height:200px;
top:-400px;
left:0px;
background-color: black;
opacity: .5;
position: relative;
pointer-events: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="box_a"></div>
<div id="box_b"></div>
<div id="box_c"></div>
<div id="box_d"></div>
<div id="box_e"></div>
</body>
You could use mouseenter, mouseleave and then an addClass on the covering div :
.noevents {
pointer-events: none;
}
$('#box_e').mouseenter(function() {
$(this).fadeTo(0,0).addClass('noevents');
});
$('.box').mouseleave(function() {
if (e.relatedTarget.className != 'box') $('#box_e').fadeTo(0,0.5).removeClass('noevents');
})
Then remove the class when the mouse is going out of the smaller boxes - and not into another one (which would cause flickering). Only requirement is to give the boxes a common class.
这篇关于如何点击消失的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
