如何点击消失的对象

这个问题是如何点击对象的延续

如何点击一个对象，让你点击的对象消失（或alpha:0 ）

这个片段有四个小方块（都有不同的颜色），还有一个黑色透明的方块，覆盖了所有四个。

那么当你在#box_a “指向”时，你怎么能这样#box_a ，你实际上是在点击#box_e 。 好吧，你可以在#box_e上使用pointer-events: none吗？ 但等一下我还希望#box_e在我的鼠标结束时消失#box_e并点击它！

到现在为止，我可能很明显无法使用pointer-events: none因为当我的鼠标超过相关对象时，我无法读取。 我该怎么办？

这是我的代码（这是一个极简主义的例子）：

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

Answer 1

你可以使用mouseenter ， mouseleave然后在覆盖div上使用addClass ：

演示

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

然后当鼠标离开较小的盒子时移除该类 – 而不是移入另一个盒子（这会导致闪烁）。 唯一的要求是给盒子一个共同的类。

Answer 2

这是我理解调查的方式。 你有一个盒子覆盖四个较小的盒子，当你将鼠标hover在它上面时你想要移除那个大盒子，这样你就可以点击“下面”四个盒子中的一个。

基于这种理解，这是一个稍微优化的小提琴： http ： //jsfiddle.net/163vuwgu/ 。

HTML：

CSS：

 .wrapper { display: table; position: relative; margin: 0 auto; } #status { text-align: center; } .wrapper > div { height: 100px; width: 100px; float: left; background-color: red; } .wrapper > div:nth-of-type(2) { background-color: blue; } .wrapper > div:nth-of-type(3) { background-color: yellow; clear: left; } .wrapper > div:nth-of-type(4) { background-color: green; } .wrapper:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .wrapper:hover:before { display: none; } 

JS：

 $(".wrapper > div").click(function(e) { $("#status").html("You have clicked " + $(this).attr("id") + "."); });