Using Hover with Special CSS Shapes

Question

I am having trouble getting :hover to work with a CSS pie slice I made. I'm using transparent borders and the border-radius property to make my div look like 1/4 of a pie. However, any styles I try to use for the hover state just don't work. I'm guessing it has something to do with the div having height: 0; and width: 0;, but I don't know how to fix this...Here's my code:

div {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
 height: 0;
  border-radius: 50%;
}
.circle-1 {
  border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 50px solid transparent;
  border-top: 50px solid green;
}
.circle-1:hover {
  border-top: 50px solid pink;
  cursor: pointer;
}
.circle-2 {
  border-left: 50px solid transparent;
 border-right: 50px solid red;
 border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}
.circle-3 {
  border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 50px solid blue;
  border-top: 50px solid transparent;
}
.circle-4 {
  border-left: 50px solid orange;
 border-right: 50px solid transparent;
 border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="circle-4"></div>

It'd be a much better idea to use SVG like in this answer here - http://stackoverflow.com/questions/27943053/how-to-create-a-circle-with-links-on-border-side/34902989#34902989 (I know `:hover` is not present in that demo but it should be easy to add it.) The `:hover` selector in the question doesn't work because you've placed 4 elements on top of each other and so even though the border colors are transparent, the only element to which you have access is the 4th one which is on top. If you put `.circle-4:hover`, it would work but that'd still not achieve what you need to it's entirety. — Harry, Feb 22 '17 at 15:34

score 1 · Answer 1 · answered Feb 22 '17 at 15:41

You have added :hover to circle-1, but the problem here is circle-1 is at the bottom of the stack (circle-4 -> 3 -> 2 -> circle-1).
Try adding : hover to circle-4, it will work.

You can create similar design with one div itself.

div {  
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
 height: 0;
  border-radius: 50%;
}
.circle-1 {
  border-left: 50px solid orange;
 border-right: 50px solid red;
 border-bottom: 50px solid blue;
  border-top: 50px solid green;
}
.circle-1:hover {
  border-top: 50px solid pink;
  cursor: pointer;
}

<div class="circle-1"></div>

Venky · Accepted Answer · 2017-02-22T15:55:31.927

I could narrow the solution, but not efficiently! I believe this will help you move further. Here is a fiddle for you : FIDDLE

HERE IS AN UPDATED FIDDLE HTML

<div><div class="circle-1"></div>
<div class="circle-2"></div><div class="clear"></div>
<div class="circle-3"></div>
<div class="circle-4"></div></div>

CSS

.circle-1{
    float:left;
    width: 90px;
    height: 90px;
    background: red;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 90px 0 0 0;
    }
    .circle-2 {
      float:left;
    width: 90px;
    height: 90px;
    background: black;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 0 90px 0 0;
    }
    .circle-3 {
      float:left;
    width: 90px;
    height: 90px;
    background: green;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 0 0 0 90px;
    }
    .circle-4 {
      float:left;
    width: 90px;
    height: 90px;
    background: blue;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 0 0 90px 0;
    }


    .circle-1:hover{
      float:left;
    width: 90px;
    height: 90px;
    background: orange;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 90px 0 0 0;
    }
    .circle-2:hover {
      float:left;
    width: 90px;
    height: 90px;
    background: pink;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 0 90px 0 0;
    }
    .circle-3:hover {
      float:left;
    width: 90px;
    height: 90px;
    background: brown;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 0 0 0 90px;
    }
    .circle-4:hover {
      float:left;
      width: 90px;
      height: 90px;
      background: purple;
     -moz-border-radius: 90px 0 0 0;
     -webkit-border-radius: 90px 0 0 0;
     border-radius: 0 0 90px 0;
    }

    .clear{clear:both;}

score 0 · Answer 3 · answered Feb 23 '17 at 10:11

As mentioned elsewhere, the reason this is happening is because you actually have all 4 divs layered over each other with .circle-4 sitting on top.

If you don't mind the addition of a little extra markup, you could achieve the same effect by adding an enclosing div and adjusting your CSS. This method has the added advantage of only needing to change the dimensions of the parent div to resize the whole thing.

.circles{
  border-radius:50%;
  font-size:0;
  height:100px;
  margin:0 auto 10px;
  overflow:hidden;
  transform:rotate(45deg);
  width:100px;
}
.circles>div{
  display:inline-block;
  padding-top:50%;
  transition:background .15s linear;
  width:50%;
}
.circle-1{
  background:green;
  cursor:pointer;
}
.circle-2{
  background:red;
}
.circle-3{
  background:blue;
}
.circle-4{
  background:orange;
}
.circles>div:hover{
  background:pink;
}

<div class="circles">
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="circle-4"></div>
</div>

Using Hover with Special CSS Shapes

3 Answers3