html - 忽略悬停对象

Question

我有一个带有变换缩放和旋转的背景图像。因此，只要您将光标放在它上面，它就会旋转 15 度并缩放 2。

我想将我的 Logo 放在它上面，但是我该怎么做，所以当我将光标放在 Logo 上时，当我悬停在背景上时它仍然算作？ CSS:

.background-image:hover {
  position: fixed;
  right: 0px;
  right: 0px;
  z-index: -999;
  display: block;
  background-image: url("whatever.jpg");
  width: 100%;
  height: 100%;

  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
  filter: blur(8px);

  transform: rotate(12deg) scale(2);
  -o-transform: rotate(12deg) scale(2);
  -moz-transform: rotate(12deg) scale(2);
  -webkit-transform: rotate(12deg) scale(2);

  transition: all 0.3s ease-in-out 0s;
}

这里我在背景上有一个 div，如果我将光标悬停在 div 上，背景的悬停就不再重要了，它会返回。如何使 div 仍然可见，当我将鼠标悬停在 div 上时背景会恢复？ div 的 CSS:

<div class="logo-position"></div>

.logo-position {
  position: relative;
  width: 800px;
  height: 600px;
  padding: 0;
  margin-right: auto;
  margin-left: auto;
  background-color: white;
  top: 80px;
}

div 的“hitbox”也很奇怪。我可以将光标移到 div 的右侧，它仍然算作我的光标在 div 内，因为背景转换返回。有人看到我做错了什么吗？

Answer 1

将 pointer-events: none; 添加到 .logo-position 类。这应该会导致 Logo 忽略悬停事件并让它通过。请注意，它将忽略所有 事件，因此它也不可点击。