将鼠标悬停在另一个元素填充所覆盖的元素上

Question

所以我有一张由svg元素组成的图块组成的地图。

在图像中，图块本身是蓝色区域，但它有一个缓冲区域，允许跨越图块外部的几何图形呈现整体。问题是这个缓冲区（绿色）覆盖了它下面的其他瓷砖的几何形状。此缓冲区在CSS中设置如下：

padding: 128px;
margin: -128px;

有没有办法悬停/点击“通过”缓冲区，或者在CSS中有更好的方法来实现这一目标吗？

Answer 1

填充是元素的一部分，因此会像标记内容一样反应。

见here。如果您确实需要将该间距设为padding，则无法点击content或padding后面的任何内容。

您可以考虑使用z-index更改分层，但为了进一步提供相关建议，您必须提供更多代码，HTML标记和CSS代码。

Answer 2

如果那个蓝色的东西是唯一需要这种处理的元素，那么我建议创建一个键绑定，用z-index将该元素移动到后面，然后用它完成。

如果你需要在所有这些红球上使用此功能，那么要做的事情可能是将你点击的那个移动到带有z-index的背面（再次）。

这两个都要求你最有可能使用JavaScript，除非你想在悬停时将那个大的蓝色元素移到后面。

要始终将点击的元素移动到后面，您可以跟踪最后分配的z-index的内容，并在每次将其分配给新对象时将其减少一个。

这样的事可能会这样做：

#box1 { position: absolute; background-color: #123; width: 100px; height: 100px; top: 200px; left: 300px; opacity: 0.9; }
#box2 { position: absolute; background-color: #ABC; width: 100px; height: 100px; top: 250px; left: 350px; opacity: 0.8; }

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

<script type="text/javascript">
var boxes = document.getElementsByClassName("box");

var length = boxes.length;

var index = 0;

function moveToBack(event)
{
    var element = this;

    this.style.zIndex = index;
    index--;

    return false;
}

for(var i = 0; i < length; i++)
{
    var box = boxes[i];

    box.addEventListener("click", moveToBack, false);
}
</scirpt>

那可以胜任吗？或者你的意思完全是什么？

Answer 3

我似乎唯一能让它工作的方法是添加一个子内部元素，并将pointer-events:none提供给包装器，将pointer-events:auto提供给内部子元素。它并不理想，因为support for pointer-events是有限的，并且不知道所有浏览器是否会尊重具有与其父级不同的值的pointer-events:none元素的子级。它需要测试。好吧，无论如何，这里是代码：

＆＃13;

＆＃13;

$('.tile').on('mouseenter', function(){
  $('.info', this).find('.tile-info').remove();
  var ts = new Date().getTime();
  $('.info', this).append('<div class="tile-info">mouseenter tile '+ts+'</div>');
});
$('.tile').on('mouseleave', function(){
  $('.info', this).find('.tile-info').remove();
  var ts = new Date().getTime();
  $('.info', this).append('<div class="tile-info">mouseleave tile '+ts+'</div>');
});

$('.inner').on('mouseenter', function(){
  $('.info', this).find('.inner-info').remove();
  var ts = new Date().getTime();
  $('.info', this).append('<div class="inner-info">mouseenter inner '+ts+'</div>');
});
$('.inner').on('mouseleave', function(){
  $('.info', this).find('.inner-info').remove();
  var ts = new Date().getTime();
  $('.info', this).append('<div class="inner-info">mouseleave inner '+ts+'</div>');
});

＆＃13;

.tile {
  width: 200px;
  height: 200px;
  background: rgba(100,100,200,0.2);
  padding: 50px;
  margin: -50px;
  position: absolute;
  pointer-events:none;
}

.tile:nth-of-type(1) {left: 300px;top: 20px;}
.tile:nth-of-type(2) {left: 90px;top: 210px;}
.tile:nth-of-type(3) {left: 0px;top: 0px;}
.tile:nth-of-type(4) {left: 360px;top: 240px;}

.tile .inner {
  width: 100%;
  height: 100%;
  background: rgba(200,100,100,0.2);
  pointer-events:auto;
  overflow: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tile">
  <div class="inner">
    <div class="info"></div>
  </div>
</div>
<div class="tile">
  <div class="inner">
    <div class="info"></div>
  </div>
</div>
<div class="tile">
  <div class="inner">
    <div class="info"></div>
  </div>
</div>
<div class="tile">
  <div class="inner">
    <div class="info"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;