How to transition using javascript?

Question

I'm trying to get both the <hr> to transition but I'm limited to selecting only the lower <hr> using css.

 html { margin: 0; height: 100%; min-height: 100%; } body { margin: 0; height: 100%; min-height: 100%; background-color: red; } hr { transition: width 1s; width: 5rem; } #container { width: 50%; height: 100%; padding: 5rem; background-color: white; margin: auto; } #expand { width: 100%; height: 100px; background: red; transition: height 1s; text-align: center; } #expand:hover { height: 200px; } #expand:hover~hr { width: 20rem; }

 <div id="container"> <hr> <div id="expand"> Learn More </div> <hr> </div>

Is there any anyway to make both the <hr> transition using simple javascript?
If not then which js library should I use?

Answer 1

Another idea is using pseudo elements instead of <hr>

 html { margin: 0; height: 100%; min-height: 100%; } body { margin: 0; height: 100%; min-height: 100%; background-color: red; } #container { width: 50%; height: 100%; padding: 5rem; background-color: white; margin: auto; } #expand { width: 100%; height: 100px; background: red; transition: height 1s; text-align: center; position: relative; } #expand:before, #expand:after { content: ''; width: 5rem; height: 1px; background: #000; transition: width 1s; position: absolute; left: 50%; transform: translateX(-50%); } #expand:before { top: -10px; } #expand:after { bottom: -10px; } #expand:hover { height: 200px; } #expand:hover:before, #expand:hover:after{ width: 20rem; }

 <div id="container"> <div id="expand"> Learn More </div> </div>

Answer 2

If you create an additional wrapper element, it can be done this way:-

 html { margin: 0; height: 100%; min-height: 100%; } body { margin: 0; height: 100%; min-height: 100%; background-color: red; } hr { transition: width 1s; width: 5rem; } #container { width: 50%; height: 100%; padding: 5rem; background-color: white; margin: auto; } #expand { width: 100%; height: 100px; background: red; transition: height 1s; text-align: center; } #expand:hover { height: 200px; } #wrapper:hover>hr { width: 20rem; }

 <div id="container"> <div id="wrapper"> <hr> <div id="expand"> Learn More </div> <hr> </div> </div>

Answer 3

well, with this #expand:hover~hr you are selecting any general successor siblings of #expand:hover and in css there is no way to select previous siblings.To make the code work bring, down both hr 's into a common parent and apply the hover hr selector. In your case

codepen: https://codepen.io/pranaynailwal/pen/wvgwvea

Replace:

#expand:hover~hr {
  width: 20rem;
}

to:

#container:hover hr {
  width: 20rem;
}

Answer 4

There is no way to style siblings backwards.

You could simply change

#expand:hover~hr {
    width: 20rem;
}

to

#container:hover hr {
    width: 20rem;
}

Answer 5

With Javascript you can add:

<script>
  const hrElements = document.querySelectorAll("hr");

  function addClass() {
    hrElements.forEach(el => el.setAttribute("class","bigger"))
  }

  function removeClass() {
    hrElements.forEach(el => el.setAttribute("class",""))
  }
<script>

EDIT to clarify include all of this css

html {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background-color: red;
}

hr {
  transition: width 1s;
  width: 5rem;
}

#container {
  width: 50%;
  height: 100%;
  padding: 5rem;
  background-color: white;
  margin: auto;
}

#expand {
  width: 100%;
  height: 100px;
  background: red;
  transition: height 1s;
  text-align: center;
}

#expand:hover {
  height: 200px;
}

.bigger {
  width: 20rem;
}

then just edit the #expand div to include onmouseover and onmouseout linked to those functions; like so:

<div id="container">
  <hr />
  <div id="expand" onmouseover="addClass()" onmouseout="removeClass()">
    Learn More
  </div>
  <hr />
</div>