How to show/hide divs on hover using JavaScript?

Product Support LT Browser
,
#1

How can I change CSS properties using JavaScript? I want to modify the CSS of a class so that when a <div> is hovered, another <div> becomes visible.

Here’s the CSS I have:

.left, 
.right {
  margin: 10px;
  float: left;
  border: 1px solid red;
  height: 60px;
  width: 60px;
}

.left:hover,
.right:hover {
  border: 1px solid blue;
}

.center {
  float: left;
  height: 60px;
  width: 160px;
}

.center .left1,
.center .right1 {
  margin: 10px;
  float: left;
  border: 1px solid green;
  height: 60px;
  width: 58px;
  display: none;
}

And the HTML structure is:

<div class="left">
  Hello
</div>
<div class="center">
  <div class="left1">
    Bye
  </div>
  <div class="right1">
    Bye1
  </div>
</div>
<div class="right">
  Hello2
</div>

I want the left1 div to become visible when the Hello div is hovered over, and the right1 div to appear when the Hello2 div is hovered. How can I achieve this with change CSS with JavaScript?

#2

Hey Shielagaa and Everyone For this Question Here is the Proper Explanation,

When it comes to changing the visibility of a <div> element in response to user interaction, using inline styles is a quick and efficient solution. Here’s an example of how you can achieve this by modifying the style.display property within the mouseover and mouseout event handlers.

In the code snippet below, two parent <div> elements (leftDiv and rightDiv) are targeted. When the user hovers over (mouseover event) either of these elements, their respective child elements (left1Div and right1Div) become visible. When the mouse is moved away (mouseout event), these child elements are hidden again.

const leftDiv = document.querySelector('.left');
const left1Div = document.querySelector('.left1');
const rightDiv = document.querySelector('.right');
const right1Div = document.querySelector('.right1');

leftDiv.addEventListener('mouseover', () => {
    left1Div.style.display = 'block';
});

leftDiv.addEventListener('mouseout', () => {
    left1Div.style.display = 'none';
});

rightDiv.addEventListener('mouseover', () => {
    right1Div.style.display = 'block';
});

rightDiv.addEventListener('mouseout', () => {
    right1Div.style.display = 'none';
});

This code utilizes simple event listeners and inline style manipulation to control the display behavior of the elements dynamically. It provides a straightforward way to show or hide elements on hover, without the need for external CSS classes or more complex methods.

I hope this explanation helps! Let me know if you need further clarification.

#3

Hello! Here is the Answer to the Question

To implement the hover effect using CSS and JavaScript, you can define a CSS class that controls the display property and toggle it on hover events using addEventListener. Below is a concise example:

.visible {
  display: block !important; /* Ensure it overrides the default */
}

const leftDiv = document.querySelector('.left');
const left1Div = document.querySelector('.left1');
const rightDiv = document.querySelector('.right');
const right1Div = document.querySelector('.right1');

leftDiv.addEventListener('mouseover', () => {
    left1Div.classList.add('visible');
});

leftDiv.addEventListener('mouseout', () => {
    left1Div.classList.remove('visible');
});

rightDiv.addEventListener('mouseover', () => {
    right1Div.classList.add('visible');
});

rightDiv.addEventListener('mouseout', () => {
    right1Div.classList.remove('visible');
});

This script toggles the .visible class to show or hide elements when hovering over the respective left and right divs.

Best regards