html鼠标悬停区域拉伸,html – ：将鼠标悬停在具有边框半径的div上

这里的问题是子元素不继承父元素的border-radius.有两种方法可以实现您想要的：您可以将子元素的border-radius设置为匹配或大于父元素的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;

}

Square hit area

Round hit area 1

Round hit area 2

如果子元素是图像,那么您将需要使用图像映射来裁剪其命中区域的附加技巧(Credit：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;

}