代码笔示例:http://codepen.io/anon/pen/Bydgyo
我想达到的目标是:当悬停在圆的四分之一上时,给那个四分之一的不透明度0.6。
然而,“.home-menu\uu quarter”div被设置为“position:relative”,以便将文本保留在图像上。
<div class="home-menu__quarter home-menu__quarter--1">
<p>text1</p>
<img src="http://i.imgur.com/KJg9cRl.jpg"/>
</div>
#home-menu .home-menu__quarter{
height: 50%;
width: 50%;
margin:0;
float: left;
position:relative;
}
由于位置:相对样式,如果我尝试将鼠标悬停在图像上,“不透明度0.6”将在到达四分之一之前生效(即边界半径50%隐藏的部分)。
任何想法,不管多么讨厌,因为这让我头痛。谢谢:)
最佳答案
我有个主意:here it is
即使您设置了border radius:50%;使悬停效果的图像仍然没有获得border radius,它只会被剪裁,因此当您悬停图像(被剪裁的部分)时,它会触发不透明度。
在我的笔中,我移除了悬停效果,并为每个#home-menu__quarter
添加了一个覆盖。这是额外的css添加:(你应该看看我的代码笔,看看我排除了什么)
.effect {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.effect:hover {
background-color: rgba(0,0,0,0.4);
}
.nasty-trick-1 {
border-top-left-radius : 150px;
}
.nasty-trick-2 {
border-top-right-radius: 150px;
}
.nasty-trick-3 {
border-bottom-left-radius: 150px;
}
.nasty-trick-4 {
border-bottom-right-radius: 150px;
}
例如,这个div:
<div class="effect nasty-trick-1"></div>
如果在左上角,则创建覆盖,悬停时使背景色为黑色(alpha不透明度为0.4)。希望你喜欢:)
关于jquery - 如何防止在鼠标到达元素之前执行css悬停效果?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28253021/