悬停在 div 的半径之外

Question

我在将 border-radius 与悬停状态结合使用时遇到问题。 悬停状态只应在光标位于圆圈顶部时发生。所以不是当它在 div 的 Angular 落时。

示例:http://tinker.io/e059c

这似乎是不可能的，所以欢迎提供有用的解决方法。

Answer 1

根据你所说的，

The hover state only should happen when the cursor is on top of the circle. So not when it's in the div's corner.

这是 WORKING SOLUTION .

HTML:

<div class='test'></div>
<div class="center"></div>

CSS:

.test{
    height:100px;
     width:100px;
    background-color:red;
    border-radius:100px;
    -webkit-border-radius: 100px;  
    -moz-border-radius: 100px;  
    position:absolute;

}

.test:hover{
    background-color:blue;
}

.center{height:90px;
     width:90px;
    background-color:red;
    border-radius:100px;
    -webkit-border-radius: 100px;  
    -moz-border-radius: 100px;  
    position:absolute;
    z-index:99;
    top:5px;
    left:5px;
}

希望这就是您要找的。希望这会有所帮助。