增加悬停探测半径

Question

我已经试过两个#my-element和a:hover#my-elementborder-radius; xx，但它不工作。

什么是设置悬停检测的CSS半径的正确方法？

Answer 1

悬停事件将尽快为您的鼠标你的元素的范围内进入触发。

border-radius不会更改元素的可变区的半径，但会更改元素的方形角的圆角效果默认。

如果你想增强你的元素的可覆盖区域，我建议你把它放在一个更大的元素中，然后你检测这个元素的悬停事件。

当然是因为CSS是一个奇妙的工具，你可以使用以下选择一个悬停的元素中更改元素的风格：

#elementBIG:hover #originalElement {...} 

这个例子中的HTML就变成了：

<div id="elementBIG"> 
    <div id="originalElement"></div> 
</div> 

Answer 2

您是否尝试过包裹目标元素与填充一个动态调整大小DIV设置为悬停MOE（误差范围）的量你想achieve-然后瞄准悬停在div ID？ - 有点不好意思，但不知道如何才能达到这种效果。

Answer 3

你想要这样吗？

通过使用伪时获取鼠标境外通过悬停效果并不来回翻转。

还与伪您保留原始元素的大小，你不需要额外的元素，你可以很容易地悬停区域更大。

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    border: 2px solid red; 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position:absolute; 
 
    top: -20%; 
 
    left: -20%; 
 
    width: 140%; 
 
    height: 140%; 
 
} 
 

 
div:hover { 
 
    border-radius: 50%; 
 
}

<div>HOVER ME</div>