ホバーオーバーオブジェクトを無視する

Question

私は、変換スケールと背景画像を持っています。だから、あなたの上にカーソルを置くと、それは15度回転して2になるでしょう。

バックグラウンドでホバリング？ CSS：私は背景のためのホバーはもうカウントされませんし、それが戻ってdivの上で、私のカーソルを置くならばここで私は、背景の上にDIVを

.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用の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の「ヒットボックス」も非常に奇妙です。私はdivの右側にカーソルを置くことができます。バックグラウンドの変換が戻ってくるので、div内にカーソルがあるので、それはまだカウントされます。誰かが私が間違ったことを見たことがありますか？

Answer 1

.logo-positionクラスにpointer-events: none;を追加します。これにより、ロゴはホバーイベントを無視して通過させるはずです。 すべてのイベントは無視されるため、クリックすることもできません。

Answer 2

.logo-position divが.background-image divの子である場合は、ホバーをロゴに適用できるようになります。