：將鼠標懸停在具有邊框半徑的div上

Question

我遇到了懸停問題和帶邊框半徑的div。

當div裏面有圖像和邊框半徑時，它的「hitbox」不正確。將鼠標懸停在div的任何角落（如果角落沒有邊框半徑，則會出現角點）會導致懸停樣式顯示。我希望樣式只在鼠標實際位於圓圈內時才顯示。

如果div中沒有​​任何內容，div的「hitbox」是正確的，但是當它裏面有元素時它會超過邊界。

我可以在div中的背景圖像，但我不想出於可訪問性的原因。

#test-wrapper { 
 
    background-color: #EEE; 
 
    border: 4px dashed #999; 
 
    display: inline-block; 
 
} 
 

 
#switcher { 
 
    border-radius: 50%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#switcher, 
 
#switcher .first, 
 
#switcher .second { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#switcher .first, 
 
#switcher .second { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#switcher:hover .first { 
 
    display: none; 
 
}

<!-- This is used to show the "hitbox" for the switcher and has no effect on the switcher itself --> 
 
<div id="test-wrapper"> 
 
    <div id="switcher"> 
 
    <!-- Shown on hover --> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=Second&w=100&h=100&txttrack=0" class="second"> 
 
    
 
    <!-- Always shown --> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=First&w=100&h=100&txttrack=0" class="first"> 
 
    </div> 
 
</div>

Answer 1

這裏的問題是，子元素不繼承父母的border-radius。有兩種方法可以實現您想要的功能：您可以將子元素的border-radius設置爲匹配或大於父元素的半徑，也可以將父元素的overflow屬性設置爲hidden。

這裏有一個快速摘錄出了問題，這兩種解決方案：

*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;} 
 
div{ 
 
    background:#000; 
 
    border-radius:50%; 
 
    display:inline-block; 
 
    line-height:150px; 
 
    margin:10px; 
 
    text-align:center; 
 
    vertical-align:top; 
 
    width:150px; 
 
} 
 
p{ 
 
    background:rgba(255,0,0,.25); 
 
} 
 
div:nth-of-type(2)>p{ 
 
    border-radius:50%; 
 
} 
 
div:nth-of-type(3){ 
 
    overflow:hidden; 
 
}

<div><p>Square hit area</p></div><div><p>Round hit area 1</p></div><div><p>Round hit area 2</p></div>

---

如果子元素是圖像，那麼你就需要使用圖像地圖的添加技巧（信用：Border-radius and :hover state area issue），如下所示：

*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;} 
 
div{ 
 
    background:#000; 
 
    border-radius:50%; 
 
    display:inline-block; 
 
    margin:10px; 
 
    text-align:center; 
 
    vertical-align:top; 
 
    width:calc(33% - 20px); 
 
    max-width:600px; 
 
} 
 
img{ 
 
    display:block; 
 
    cursor:pointer; 
 
    height:auto; 
 
    width:100%; 
 
} 
 
div:nth-of-type(2)>img{ 
 
    border-radius:50%; 
 
} 
 
div:nth-of-type(3){ 
 
    overflow:hidden; 
 
}

<div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600"></div><div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600" usemap="circle"></div><div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600" usemap="circle"></div> 
 
<map name="circle"><area shape="circle" coords="0,100%,100%,100%"></map>