Question

我正试图将鼠标移到另一张图像后面的图像上。

有没有办法渲染前面的图像，就好像它不存在一样，所以我可以鼠标悬停在它后面的另一个图像上？

Example can be seen here: 我不能鼠标悬停在徽标边界框后面的字符。

Answer 1

您可以在阻碍对象上设置CSS属性pointer-events: none但请注意指针事件是全部或全部;鼠标悬停和悬停将直接通过，但点击也是如此。

以下是Mozilla开发人员网络的价值说明：

none：该元素永远不是鼠标事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能会以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间在发送/来自后代的路径上触发此父元素上的事件侦听器。

我把一个小例子放在一起。在此示例中，我使用的是onmouseover和onmouseout，因为您在网站上使用了这些内容，但您可以轻松使用CSS :hover伪-selector。这是示例的jsfiddle version，下面是堆栈代码。

＆＃13;

.hoverable {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.obscuring {
  /* this first line is the important part */
  pointer-events: none;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0.5;
}

＆＃13;

<div class="hoverable" onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = 'blue'"> </div>
<div class="obscuring"> </div>

＆＃13;

Answer 2

你可以在整个事物的顶部创建一些不可见的div，并将悬停行为放在它们上面。然后用不可见div的位置控制字符位置。

希望它有意义。

如何将MouseOver放在对象后面？

2 个答案: