Question

我有一个带变换比例和旋转的背景图像。因此，无论何时将光标放在它上面，它都会旋转15度并缩放2.

我想将我的徽标放在它上面，但是我怎么能这样做，所以每当我把光标放在徽标上时，它仍然会在我在背景中徘徊时计算？的 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;
}

＆＃34; hitbox＆＃34;对于div来说也很奇怪。我可以将光标移到div的右边，它仍然计数，因为我将光标放在div中，因为背景变换返回。有人看到我做错了吗？

Answer 1

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

Answer 2

如果.logo-position div是.background-image div的子项，则允许将鼠标悬停应用于徽标。

悬停时忽略对象

2 个答案: