如何防止 css 悬停效果在您用鼠标到达元素之前执行？

Question

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 样式，如果我尝试将鼠标悬停在图像上，'opacity 0.6' 在我到达四分之一之前开始（即被 border-radius 隐藏的部分） 50%).

任何想法，无论多么 hacky 都是受欢迎的，因为这让我费尽心思。谢谢 :)

Answer 1

我有一个想法：here it is

即使你把 border-radius :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）。希望你喜欢:)

如何防止 css 悬停效果在您用鼠标到达元素之前执行？

How to prevent css hover effects executing before you reach the element with your mouse?

html

css

jquery

css-position