Rotate span element borders on parent hover

Question

I have 3 horizontal lines within a div. When I hover on the enclosing div, I'd like to rotate the first and last lines to form a + (plus sign).

At the moment, when you hover on the first and last lines, they rotate at 90deg but I'd like the lines to rotate when I hover anywhere within the div. I'm not sure if CSS3 alone can do this or if I need to use jQuery.

Here is a fiddle of the below:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  padding-top: 15px;
}
div .bar {
  border-bottom: 5px solid #ffffff;
  height: 10px;
  width: 50px;
  display: block;
  margin: 5px auto;
}
div .bar:first-child:hover {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}
div .bar:last-child:hover {
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

<div>
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

Answer 1

Give the parent div the :hover pseudo-class and target its children — div:hover children

---

That said, I'm a sucker for a smooth animation; that's what I have concentrated on in this example, along with reducing the markup required.

Let's make this — the middle stroke fades away and the bottom stroke completes a 360 rotation ending up in the middle. The two examples to the right take it a little further. These are low-grade gifs that look a lot better in the demos below!

The HTML

Just one HTML element is required:

<div></div>

The CSS

• The first and third strokes are created with :before and :after pseudo elments.

• The middle stroke is created with the box shadow property of :before. They create the same as this:

  <div>
    <div>I am :before</div>
  
    I am an illusion created by box-shadow
  
    <div>I am :after</div>
  </div>
  

• The smooth transition is given by div:before, div:after { transition: all 0.3s; }

Complete Example - simple transition

div:before,
div:after {
  transition: all 0.3s;
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  cursor: pointer
}
div:before,
div:after {
  content: '';
  height: 5px;
  width: 50px;
  display: block;
  position: absolute;
  background: #FFF;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  transform: rotate(0);
}
div:before {
  margin-top: -20px;
  box-shadow: 0 20px 0 #FFF;
}
div:after {
  margin-top: 20px;
}
div:hover:after {
  margin-top: 0;
  transform: rotate(360deg);
}
div:hover:before {
  margin-top: 0;
  transform: rotate(90deg);
  box-shadow: none;
}

<div></div>

More examples

You can make all kinds of animations with this basic concept:

h2 {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.8em;
}

div,
div:before,
div:after {
  transition: all 0.3s;
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
}
div:before,
div:after {
  content: '';
  height: 5px;
  width: 50px;
  display: block;
  position: absolute;
  background: #FFF;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  transform: rotate(0);
}
div:before {
  margin-top: -20px;
  box-shadow: 0 20px 0 #FFF;
}
div:after {
  margin-top: 20px;
}
div.one:hover:after {
  margin-top: 0;
  transform: rotate(360deg);
}
div.one:hover:before {
  margin-top: 0;
  transform: rotate(450deg);
  box-shadow: none;
}
div.two:hover {
  border-radius: 50%;
  transform: rotate(180deg);
}
div.two:hover:after {
  margin-top: -3px;
  transform: rotate(360deg);
  width: 30px;
  margin-left: -16px;
}
div.two:hover:before {
  margin-top: -3px;
  transform: rotate(450deg);
  box-shadow: none;
  width: 30px;
  margin-left: -16px;
}
div.three {
  box-shadow: 0 0 1px #F00;
}
div.three:hover {
  border-radius: 50%;
  transform: rotate(360deg);
  box-shadow: 0 0 30px #F00;
  -webkit-animation: pulse 1s infinite;
  animation: pulse 1s infinite;
}
div.three:hover:after {
  margin-top: -3px;
  transform: rotate(360deg);
  width: 30px;
  margin-left: -16px;
}
div.three:hover:before {
  margin-top: -3px;
  transform: rotate(450deg);
  box-shadow: none;
  width: 30px;
  margin-left: -16px;
  
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30px #F00;
  }
  100% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
  50% {
    transform: scale(1.05);  
    box-shadow: 0 0 30px #F00;
  }
  100% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
}

<h2>Spinny</h2>
<div class="one"></div>

<h2>Circular Ripple</h2>
<div class="two"></div>

<h2>Heartbeat</h2>
<div class="three"></div>