代码笔示例: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/

10-12 00:17
查看更多