Question

的延续

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

这个片段有四个小方块（全部颜色各异），一个黑色透明，覆盖全部四个。

那么当你在#box_a“指向”时，你是如何实现这一点的，你实际上是在点击#box_e。那么，您可以pointer-events: none使用#box_e吗？但等一下，当鼠标移过#box_e时，我也希望#box_e消失。点击它！

到目前为止，很明显我 cant 使用 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
}

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

Answer 1

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

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

HTML：

<div class = "wrapper">
    <div id="box_a"></div>
    <div id="box_b"></div>
    <div id="box_c"></div>
    <div id="box_d"></div>
</div>
<p id = "status"></p>

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

Answer 2

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

Demo

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

当鼠标离开较小的盒子时，然后不进入另一个盒子（这将导致闪烁），然后删除该类。唯一的要求是给这个方框提供一个共同的类。

如何点击消失的对象

2 个答案: