What are the steps for transitioning with JavaScript?

Question

What are the steps for transitioning with JavaScript?

My goal is to make both the <hr> elements transition, but I'm struggling with only being able to select the lower <hr> using CSS.

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

body {
  margin-top: 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 a way to achieve the desired transition for both the <hr> elements using plain JavaScript? If not, which JavaScript library would be suggested?

javascript html css

Answer 1

Answer №1

Consider using pseudo elements instead of the <hr> tag

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

Consider using pseudo elements instead of the <hr> tag

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 3

Answer №2

To achieve this effect with an extra container element, you can follow these steps:

body {
  margin: 0;
}

.container {
  width: 50%;
  height: 100%;
  padding: 3rem;
  background-color: lightgray;
  margin: auto;
}

.expander {
  width: 100%;
  height: 50px;
  background: blue;
  color: white;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  transition: height 1s;
}

.expander:hover {
  height: 100px;
}

<div class="container">
  <div class="expander">
    Click to Expand
  </div>
</div>

Answer 4

To achieve this effect with an extra container element, you can follow these steps:

body {
  margin: 0;
}

.container {
  width: 50%;
  height: 100%;
  padding: 3rem;
  background-color: lightgray;
  margin: auto;
}

.expander {
  width: 100%;
  height: 50px;
  background: blue;
  color: white;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  transition: height 1s;
}

.expander:hover {
  height: 100px;
}

<div class="container">
  <div class="expander">
    Click to Expand
  </div>
</div>

Answer 5

Answer №3

When using #expand:hover~hr, you are targeting any following siblings of #expand:hover. Unfortunately, CSS does not have a way to select previous siblings. To fix this, move both hr elements under a shared parent and use the hover hr selector in this case.

Take a look at the codepen example: https://codepen.io/pranaynailwal/pen/wvgwvea

Instead of:

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

Use:

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

Answer 6

When using #expand:hover~hr, you are targeting any following siblings of #expand:hover. Unfortunately, CSS does not have a way to select previous siblings. To fix this, move both hr elements under a shared parent and use the hover hr selector in this case.

Take a look at the codepen example: https://codepen.io/pranaynailwal/pen/wvgwvea

Instead of:

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

Use:

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

Answer 7

Answer №4

Enhance your website with JavaScript:

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

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

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

UPDATE to provide clear CSS instructions

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

Add the following code snippet to the #expand div for mouseover and mouseout effects:

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

Answer 8

Enhance your website with JavaScript:

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

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

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

UPDATE to provide clear CSS instructions

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

Add the following code snippet to the #expand div for mouseover and mouseout effects:

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

Answer 9

Answer №5

It is not possible to apply styles to previous siblings in CSS.

One workaround could be to modify the code from:

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

to:

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

Answer 10

It is not possible to apply styles to previous siblings in CSS.

One workaround could be to modify the code from:

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

to:

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

What are the steps for transitioning with JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What steps should be taken to ensure that Google effectively crawls through an AngularJS application?

What is the best approach for inserting multiple files into MongoDB with just one JavaScript, Node JS, Shell Script, or mongofile CLI script?

I require the ability to retrieve only the data from a UI grid column, specifically based on the column name selected

Discovering the wonders of React and Javascript through the powerful Map function

Passing JSON data with special characters like the @ symbol to props in React can be achieved

Utilizing helper functions in Node based on their specific types

Tips for validating date input in a TextBox using JQuery on an ASP.NET platform:

Sending the value from a for loop through AJAX and populating it into a form field

The PHP file on the server is missing the mandatory "event" parameter for the EventSource

What is the best way to stop an embedded mp4 video from playing when a dynamically generated button is clicked?

Using Conditional Tags for CSS Display

Having trouble determining the total amount in my online shopping cart

Is it possible to obtain the index of a table row using querySelector?

What is the outcome of using VueUse.useMouse() if it is not made reactive?

JavaScript: Adjust DIV Width Based on Window Height

A guide on initiating a get request with URL in React

Why is the inline-block element in the list displaying on two lines? The text contains a number, but does it affect the layout?

Even after assigning the class "img-fluid" to my image, it still fails to properly adjust to the screen size

What causes the exception in JavaScript to be an empty object?

Creating a string specifically for implementing regular expressions in JavaScript