转换多个对象在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;
}
});
任何提示?
答
我认为它是因为你的包装是在你的里面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/
答
我认为这是因为div的内容是重叠的,并且你不能分辨哪个div被徘徊。
我改变了代码一点点,使集群外的“.innercontent
”,正如你可以看到当你将鼠标悬停在它,你就会得到一个pointer
光标:
.inner_content{
height: 100px;
width: 100px;
background:green;
margin: 420px 50px 50px 50px;
}
+0
但我的观点是,它应该是“hoverable”(光标变为指针),甚至当“innercontent”重叠。 当我徘徊在innercontent上时,我可能在另一个红色“内容”上徘徊。这也应该改变我的光标。 – JavascriptDeveloper
谢谢,这解决了这个问题! – JavascriptDeveloper