Partially fill object when hovering

Question

I have code below for a content cycle I have created with the help from some other Stack Overflow users. Is it possible to have the circular arrow fill up partially depending on what box your hovered on. Example: If the user hovers on box four (the bottom box) the circular arrow would fill up with a different color only up until that box. Is this possible to do with pure CSS only? If not would this be possible with vanilla JavaScript (no Jquery)? Anything helps, cheers.

.container .row {
  text-align: center;
  position: relative;
}

.row {
  position: relative;
}

.one {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.one:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.two {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
  margin-left: -35px;
}

.two:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.three {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
  margin-left: -35px;
}

.three:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.four {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.four:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}


.five {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.five:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.six {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.six:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.circle {
  display: inline-block;
  background-color: #006850;
  width: 85px;
  height: 85px;
  border-width: 3px;
  border-style: solid;
  border-color: #fefefe;
  border-radius: 50%;
  box-shadow: 0px 1px 5px #888888;
  margin-bottom: -15px;
}

.invisible {
  visibility: hidden;
  display: inline-block;
  background-color: #1f497d;
  width: 130px;
  height: 65px;
  border-width: 3px;
  border-style: solid;
  border-color: #d6d6d6;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  color: #d0d3d8;
  width: 250px;
  height: 250px;
  border: 17px solid;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -1;
}

.arrow:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0;
  top: -10px;
  left: 55px;
  background: #fff;
  transform: rotate(-120deg);
}

.arrow:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d0d3d8;
  position: absolute;
  top: 0px;
  left: 40px;
  transform: rotate(-120deg);
}

<div class="container">
  <div class="row">
    <div class="one"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="six"></div>
    <div class="invisible"></div>
    <div class="two"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="invisible"></div>
    <div class="circle"></div>
    <div class="invisible"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="five"></div>
    <div class="invisible"></div>
    <div class="three"></div>
  </div>
  <div class="row">
    <div class="four"></div>
  </div>
  <div class="arrow"></div>
</div>

Interesting problem. Just my first thoughts: Surely possible with SVG. Probably possible with CSS via `clip-path`, but browser support might be (too) limited. Maybe possible with CSS in another way (I've seen people create color circles with it), but couldn't say how. — domsson, Jul 05 '17 at 19:10
I would try a combination of [radial CSS gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) and CSS transitions. I'm not sure that you would be able to accomplish this entirely without JS. — zero298, Jul 05 '17 at 19:45
Some time ago I posted an example of a CSS animation that covered all the circle. https://stackoverflow.com/a/28866340/1926369 In this case, you only need to have the precalculated case covering 1/6th of the circle way up to 5/6th. I will try to give you a more detailed answer — vals, Jul 05 '17 at 20:19

vals · Accepted Answer · 2017-07-06T16:28:24.347

I have fully changed your layout.

Now everything works ok. And also, making changes in the position will be easier.

.container {
  width: 250px;
  height: 250px;
  position: absolute;
  top: 45px;
  left: 0px;
  right: 0px;
  margin: auto;
}

.ele, .arrow, .circle {
   position: absolute;
   left: 0px;
   right: 0px;
   top: 0px;
   bottom: 0px;
   margin: auto;
}

#one {
    transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
    transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
    transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
    transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
    transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
    transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}


.ele {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.ele:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.circle {
  background-color: #006850;
  width: 85px;
  height: 85px;
  border-width: 3px;
  border-style: solid;
  border-color: #fefefe;
  border-radius: 50%;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  color: #d0d3d8;
  width: 250px;
  height: 250px;
  border: 17px solid;
  border-radius: 50%;
  position: absolute;
  z-index: -3;
  left: -17px;
}

#two:hover ~ .arrow {
  border-top-color: red;
  transform: rotate(24deg);
}
#three:hover ~ .arrow {
  border-top-color: red;
  transform: rotate(66deg);
}
#four:hover ~ .arrow {
  border-top-color: red;
  border-right-color: red;
  transform: rotate(25deg);
}
#five:hover ~ .arrow {
  border-top-color: red;
  border-right-color: red;
  border-bottom-color: red;
  transform: rotate(26deg);
}
#six:hover ~ .arrow {
  border-top-color: red;
  border-right-color: red;
  border-bottom-color: red;
  transform: rotate(66deg);
}
#one:hover ~ .arrow {
  border-color: red;
}
#one:hover ~ .circle:after {
  border-top-color: red;
}


.circle:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0;
  top: -96px;
  left: -36px;
  background: #fff;
  background-color: white;
  transform: rotate(-120deg);
  z-index: -1;
}

.circle:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d0d3d8;
  position: absolute;
  top: -83px;
  left: -44px;
  transform: rotate(-120deg);
}

<div class="container">
    <div class="ele" id="one">1</div>
    <div class="ele" id="two">2</div>
    <div class="ele" id="three">3</div>
    <div class="ele" id="four">4</div>
    <div class="ele" id="five">5</div>
    <div class="ele" id="six">6</div>
    <div class="arrow"></div>
    <div class="circle"></div>
</div>

Sweet work! But it seems like the pointer event is list when overing on the blue boxes that lie inside of the area delineated by the arrow? — Terry, Jul 05 '17 at 21:09
@vals possible to have the draw effect like in your example you commented earlier? — David Kris, Jul 05 '17 at 21:17
@Terry I had already said that the hover wasn't working. But to make it work ok a full rewrite of the layout was necessary — vals, Jul 06 '17 at 16:29
@ColeGwozdecki Yes, adapting my anterior answer here would be possible. But I think that I have already answered this question, and you should post another question for this new request — vals, Jul 06 '17 at 16:31

score 0 · Answer 2 · answered Jul 05 '17 at 19:54

0

If you don't mind using images for your arrow, you could have a different image for the arrow depending on which box is hovered and then you can change the image out via css:

.one:hover {
  background: url("box1arrow.jpg"); // obviously, set this to whichever image you need
}

answered Jul 05 '17 at 19:54

sorayadragon

1,087
7
21

Mmm I thought about that, I think I would use that as a last resort if I cant get it to work. Thanks for the reply! – David Kris Jul 05 '17 at 19:57

Partially fill object when hovering

2 Answers2