Ways to show div1 when hovering over div2 and make div1 fade out when the mouse moves away?

Question

Ways to show div1 when hovering over div2 and make div1 fade out when the mouse moves away?

I'm looking to create an effect where div1 appears when hovering over div2, and only disappears when neither div1 nor div2 are being hovered over.

I attempted to achieve this using CSS and jQuery, but encountered an issue where div1 would disappear immediately after moving the mouse away from div2, making it difficult to access the content of div1.

    $(document).ready(function() {
      $('.about').hover(
      function() {
        $('.showsection').slideDown(800).addClass('show');
      }
      , function() {
        $('.showsection').slideToggle(800);
         });
      });

.showsection{
display:none;
    }
    .show{
display:block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=about>
  <h1>About</h1>
  </div>

  <div class="showsection">
  <h1>Title</h1>
</div>

javascript jquery html css

Answer 1

Answer №1

To achieve this functionality, you can utilize the mouseenter and mouseleave events on the specific elements that you want to toggle visibility.

Here are the necessary steps:

Show the element with the class showsection when the mouse enters the element with the class about. This can be accomplished by using the mouseenter event on the about element.
Hide the element with the class showsection when the mouse is not hovering over either the showsection or about elements. This involves checking two conditions: ensuring that the mouse is not hovering over the showsection when it leaves the about, and also confirming that the mouse is not hovering over the about when it leaves the showsection. As a result, you need to attach mouseleave events to both the showsection and about elements.

The provided code snippet below demonstrates how to implement this functionality.

// JavaScript
$(document).ready(function() {  
  // When mouse enters .about
  $('.about').on('mouseenter', function() {
    $('.showsection').slideDown(800);
  });
  
  // When mouse leaves .about
  $('.about').on('mouseleave', function() {        
    // If mouse is not hovering over .showsection, hide it
    if (!$('.showsection').is(':hover')) {
      $('.showsection').slideToggle(800);
    }
  });
  
  // When mouse leaves .showsection
  $('.showsection').on('mouseleave', function() {        
    // If mouse is not hovering over .about, hide .showsection
    if (!$('.about').is(':hover')) {
      $('.showsection').slideToggle(800);
    }
  });
});

/* CSS */
.showsection {
  display: none;
  background: #ddd;
}

h1 { margin: 0; }

.about { background: #eee; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class=about>
  <h1>About</h1>
</div>

<div class="showsection">
  <h1>Title</h1>
</div>

Answer 2

To achieve this functionality, you can utilize the mouseenter and mouseleave events on the specific elements that you want to toggle visibility.

Here are the necessary steps:

Show the element with the class showsection when the mouse enters the element with the class about. This can be accomplished by using the mouseenter event on the about element.
Hide the element with the class showsection when the mouse is not hovering over either the showsection or about elements. This involves checking two conditions: ensuring that the mouse is not hovering over the showsection when it leaves the about, and also confirming that the mouse is not hovering over the about when it leaves the showsection. As a result, you need to attach mouseleave events to both the showsection and about elements.

The provided code snippet below demonstrates how to implement this functionality.

// JavaScript
$(document).ready(function() {  
  // When mouse enters .about
  $('.about').on('mouseenter', function() {
    $('.showsection').slideDown(800);
  });
  
  // When mouse leaves .about
  $('.about').on('mouseleave', function() {        
    // If mouse is not hovering over .showsection, hide it
    if (!$('.showsection').is(':hover')) {
      $('.showsection').slideToggle(800);
    }
  });
  
  // When mouse leaves .showsection
  $('.showsection').on('mouseleave', function() {        
    // If mouse is not hovering over .about, hide .showsection
    if (!$('.about').is(':hover')) {
      $('.showsection').slideToggle(800);
    }
  });
});

/* CSS */
.showsection {
  display: none;
  background: #ddd;
}

h1 { margin: 0; }

.about { background: #eee; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class=about>
  <h1>About</h1>
</div>

<div class="showsection">
  <h1>Title</h1>
</div>

Answer 3

Answer №2

When utilizing the CSS :hover attribute, it will solely affect the specific element it is applied to, which in this scenario would be div1. Therefore, to achieve your desired outcome, incorporating JavaScript is necessary.

To accomplish this task, use JavaScript to assign a mouseenter and mouseleave event to div1. Within these event listener functions, specify the actions you would like div2 to perform.

This approach outlines the steps needed to achieve the desired functionality.

Answer 4

When utilizing the CSS :hover attribute, it will solely affect the specific element it is applied to, which in this scenario would be div1. Therefore, to achieve your desired outcome, incorporating JavaScript is necessary.

To accomplish this task, use JavaScript to assign a mouseenter and mouseleave event to div1. Within these event listener functions, specify the actions you would like div2 to perform.

This approach outlines the steps needed to achieve the desired functionality.

Ways to show div1 when hovering over div2 and make div1 fade out when the mouse moves away?

Answer №1

Answer №2

Similar questions

Having RoundRect take the top left position of its rectangle container rather than its immediate parent (td)

The issue with the Ajax JSON Loader malfunctioning

Execute a function in HTML that has been declared in the controller

Steps to saving an item in the browser's local storage in real-time

What is the best way to customize global styles in nextJS?

A correct JSON format for presenting information within an AngularJs framework

The flow of events is not hindered by an if statement, even when the code within it is executed

How can I efficiently load multiple database divs asynchronously?

The addClass method in jQuery is failing to append the specified class to the element

What is the best way to secure the installation of python packages for long-term use while executing my code within a python shell on NodeJS?

What is the best way to style the header of a table when scrolling in CSS?

What is the process for obtaining X through the use of createElement('img')?

How can you transform this jQuery snippet into a unique Javascript function?

Navigate through the Div and Unordered List with ease by scrolling

Executing a NestJs cron job at precise intervals three times each day: a guide

Utilize ajax to send both images and text simultaneously

What is the best way to ensure that the scroll position on each page in shinydashboard remains unaffected by changes in the scroll position on other pages?

Adjust the button's width as the text changes to create a dynamic animation

Create a feature to disable user accounts using a combination of jQuery, AJAX, and PHP

What is the best way to target an HTML attribute using jQuery?