: hover over div with bounding radius
I have a hover problem and a div with a bounding radius.
When a div has images inside it and a border radius, the "hitbox" for it is wrong. 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 display. I would expect the style to only display when the mouse is within the circle.
If there is nothing in the div, the "hitbox" div is correct, however it goes over the border when there are elements in it.
I could create a background image in a div, however I would rather not use one 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>
source to share
The problem is that children do not inherit from border-radius
their parents. There are two ways to achieve what you want: you can set the border-radius
child (s) to match or be larger than the radius of the parent, or you can set the property of the overflow
parent to a value 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 children are images, you will need the added trick of using an image map to crop their hit areas (Credit: Border Border and: Hover Region State Area ), for example:
*{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>
source to share