：悬停在具有边界半径的div上 [英] :hover on a div with a border radius

问题描述

我遇到悬停问题和带边框半径的div。

当div中有图片和边框半径时，hitbox因为它是不正确的。将鼠标悬停在div的任意一个角上（如果没有边框半径，则为角点）会导致悬停样式显示。

如果div中没有​​任何内容，那么div的hitbox是正确的，但是，

我可以在div中创建一个背景图片，但是我不想出于辅助功能的原因。

 ＃test-wrapper {background-color：#EEE; border：4px dotted＃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;}  

 <！ - 这用于显示切换台的hitbox，并且不会影响切换台本身 - >< div id =test-wrapper> < div id =switcher> <！ - 显示在悬停 - > < img src =https://placeholdit.imgix.net/~text?txtsize=30&txt=Second&w=100&h=100&txttrack=0class =second> <！ - 始终显示 - > < img src =https://placeholdit.imgix.net/~text?txtsize=30&txt=First&w=100&h=100&txttrack=0class =first> < / div>< / div>  

解决方案

这里的问题是子元素不继承父母的 border-radius 。有两种方法来实现你想要的：你可以设置子元素的 border-radius 匹配或大于父元素的半径或集合父元素的溢出属性到 hidden 。

这里有一个快速代码片段说明问题和两个解决方案：

  * {box-sizing：border-box; color：#fff; font-家族：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： type（3）{overflow：hidden;}  

  div>< p> Square命中区< / p>< / div>< div>< p>圆命中区1< / p>< / div>< div>< p& 2< / p>< / div>  

---

如果子元素是图像，那么你需要使用图像映射来剪裁它们的命中区域（信用：边框半径和：悬停状态区域问题），如下所示：

  * {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 =600src = http://lorempixel.com/600/600/nature/3/width =600>< / div>< div>< img alt =height =600src =http ：//lorempixel.com/600/600/nature/3/width =600usemap =circle>< / div>< div>< img alt =height =600src =http://lorempixel.com/600/600/nature/3/width =600usemap =circle>< / div>< map name =circle>< area shape =circlecoords =0,100％，100％，100％>< / map>  

b $ b

I'm having an issue with hovering and a div with a border radius.

When a div has images inside it and a border radius, the "hitbox" for it is incorrect. Hovering over any of the corners of the div (where the corners would be if it didn't have a border radius) causes the hover style to show. I would expect the style to only show when the mouse is actually within the circle.

If there is nothing in the div, the div's "hitbox" is correct, however it surpasses the border when there are elements within it.

I could a background image in the div, however I'd prefer not to for accessibility reasons.

#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>

解决方案

The problem here is that child elements do not inherit the border-radius of their parents. There are 2 ways to achieve what you want: you can either set the border-radius of the child element(s) to match or be greater than the parent element's radius or set the overflow property of the parent element to hidden.

Here's a quick Snippet illustrating the problem and both solutions:

*{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>

---

If the child elements are images then you'll need the added trick of using an image map to crop their hit areas (Credit: Border-radius and :hover state area issue), like so:

*{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>

这篇关于：悬停在具有边界半径的div上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！