忽略悬停对象

Question

I have a background-image with transform scale and rotate. So whenever you have your cursor over it it will rotate 15deg and scale 2.

I want to place my logo over it but how can I do it so whenever I have my cursor over the logo it will still counts as I am hovering at the background? 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;
}

Here I have a div over the background, if I hold my cursor over the div the hover for the background doesn't count anymore and it goes back. How can I make the div still visible and when I hover my mouse over the div the background will go back? CSS for the div:

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

The "hitbox" for the div is also very weird. I can take the cursor to the right of the div and it still counts as I have my cursor inside the div as the background transform goes back. Anybody see anything I have done wrong?

Answer 1

Add pointer-events: none; to the .logo-position class. This should cause the logo to ignore the hover event and let it pass through. Note that it will ignore all events, so it won't be clickable either.

Answer 2

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