CODEWITHSUNDEEP
javascripthtmlcss
cak3_lover
cak3_lover

Reputation: 1928

How to transition using javascript?

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?

Upvotes: 1

Views: 103

Answers (5)

Nagy Oliv&#233;r
Nagy Oliv&#233;r

Reputation: 213

There is no way to style siblings backwards.

You could simply change

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

to

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

Upvotes: 0

mallxowed
mallxowed

Reputation: 21

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>

Upvotes: 0

Pranay Nailwal
Pranay Nailwal

Reputation: 542

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;
}

Upvotes: 0

doğukan
doğukan

Reputation: 27381

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>

Upvotes: 1

Lakshya Thakur
Lakshya Thakur

Reputation: 8308

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>

Upvotes: 0

Related Questions