Codepen示例：http：//codepen.io/anon/pen/Bydgyo
我要实现的目标：将鼠标悬停在四分之一的圆上时，使该四分之一的透明度为0.6。
但是，“。home-menu__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;
}
由于position：relative样式，如果我尝试将鼠标悬停在图像上，则在到达四分之一（即被边界半径50％隐藏的部分）之前，“不透明度0.6”会加入。
任何想法，无论如何欢迎，因为这正在我的脑海中。谢谢:)
我有一个主意：这是
即使您将边框半径设为：50％，进行悬停效果的图像仍然没有边界半径，只会被裁剪，因此，当您将图像悬停（被裁剪的部分）时，它会触发不透明度。
我用笔去除了悬停效果，并为每个添加了一个覆盖#home-menu__quarter。这是添加的额外的CSS ：（您应该查看我的codepen以查看我排除的内容）
.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）。希望你喜欢它 ：）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句