轉換多個對象在hover上搞砸

當我嘗試在同一個類上放置不同的div時，onHover在鼠標懸停時無法正常工作。轉換多個對象在hover上搞砸

在我的jsfiddle你可以嘗試將鼠標懸停在綠色的部分：這是不會改變的curcus爲「指針」

的jsfiddle：https://jsfiddle.net/bh6n7v3n/

HTML：

<div class="wrapper"> 
    <div class="content"> 
    <div class="inner_content"></div> 
    </div> 
</div> 
<div class="wrapper"> 
    <div class="content"></div> 
</div> 
<div class="wrapper"> 
    <div class="content"></div> 
</div> 
<div class="wrapper"> 
    <div class="content"></div> 
</div> 
<script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script>

CSS：

.wrapper{ 
    position: absolute; 
    top: 50vh; 
    left: 50vw; 
} 

.content{ 
    height: 200px; 
    width: 200px; 
    position: relative; 

    transform: rotateX(65deg) rotateY(0deg) rotateZ(-44deg); 
    -ms-transform: rotateX(65deg) rotateY(0deg) rotateZ(-44deg); 
    -webkit-transform: rotateX(65deg) rotateY(0deg) rotateZ(-44deg); 
    transform: rotateX(65deg) rotateY(0deg) rotateZ(-44deg); 

    transform-origin: 50% 50%; 
    -webkit-transform-origin: 50% 50%; 
    -ms-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 

    cursor: pointer; 
    background: rgba(255,0,0,0.2); 
    border: 2px solid black; 
} 

.inner_content{ 
    height: 100px; 
    width: 100px; 
    background:green; 
    margin: 50px; 
}

JS：

$(document).ready(function() { 
    var svgArray = $(".wrapper"); 

    var startValue = 50; 
    var interval = 20; 
    var startTranslationValue = startValue - (Math.ceil((svgArray.length-1)/2)*interval); 

    for (var i = 0; i <= svgArray.length - 1; i++) { 
     svgArray.eq(i).css('transform', 'translateX(-50%) translateY(-' + startTranslationValue + '%)'); 
     startTranslationValue += interval; 
    } 
});

任何提示？

來源

2017-08-10 JavascriptDeveloper

我認爲它是因爲你的包裝是在你的裏面div，阻止懸停狀態。

嘗試使用這個CSS：

.wrapper{ 
    pointer-events: none; 
} 
.content{ 
    pointer-events: auto; 
} 
/* This css just to see the hover state */ 
.content:hover{ 
    background: red; 
}

你可以在這裏進行測試：https://jsfiddle.net/jurdkyz4/

來源

2017-08-10 11:05:07 klintman

謝謝，這解決了這個問題！ – JavascriptDeveloper

我認爲這是因爲div的內容是重疊的，並且你不能分辨哪個div被徘徊。

我改變了代碼一點點，使集羣外的「.innercontent」，正如你可以看到當你將鼠標懸停在它，你就會得到一個pointer光標：

.inner_content{ 
    height: 100px; 
    width: 100px; 
    background:green; 
    margin: 420px 50px 50px 50px; 

}

https://jsfiddle.net/bh6n7v3n/1/

來源

2017-08-10 09:39:15 Airwavezx

但我的觀點是，它應該是「hoverable」（光標變爲指針），甚至當「innercontent」重疊。當我徘徊在innercontent上時，我可能在另一個紅色「內容」上徘徊。這也應該改變我的光標。 – JavascriptDeveloper

轉換多個對象在hover上搞砸

回答

相關問題