Exploring the connection between two divs using onmouseover and onmouseout events in JavaScript

Question

Exploring the connection between two divs using onmouseover and onmouseout events in JavaScript

I am currently working on creating a function that displays a button when the mouse hovers over an element and hides it when the mouse is moved away. The example below illustrates my issue:

------------------------------------------------------------


 ---------
| button2 |           DIV#1                 Button1
|         |
| DIV#2   |
|         |
----------------------------------------------------------
|         |
-----------

**The CSS** 
#div1{

    height: 200px;
    width:500px;
    position: relative;
}
#div2{
    height: 150px;
    width: 150px;
    left: 19px;
    top: 76px;
    position: absolute;
}

**Javascript**
$("#button1").hide();
$("#button2").hide();

$('#div1').mouseover(function() {
$("#button1").show();
});

$('#div1').mouseout(function() {
$("#button1").hide();
});

$('#div2').mouseover(function() {
$("#button2").show();
});

$('#div2').mouseout(function() {
$("#button2").hide();
});

HTML There are many elements in my document, but for clarity:

<div id='div1'>  <div id='div2'>example button2 </div> example button1 </div>

The issue at hand:

When hovering over DIV#2, Button1 also shows up. It seems like these two divs are somehow connected. Is there a way to ensure that Button1 only displays when hovering over DIV#1?

I attempted to use z-index, but it did not solve the problem.

javascript css

Answer 1

Answer №1

If div2 is positioned on top of div1, there may be an issue when the mouse hovers over the area where both divs overlap. In such cases, both divs may trigger a mouseover event. To prevent this from happening, you can use event propagation on #div2 to ensure that the mouseover event does not transfer down to the underlying div1 when the cursor moves over div2 and into the overlapping region.

$('#div2').mouseover(function(event) {
    $("#button2").show();
    event.stopPropagation(); // prevents mouseover event on other div
});

Similarly, you might want to include code that hides button1 when the mouse transitions from div1 to

div2</code without fully exiting the underlying <code>div1

- specifically in the overlapping zone.

$('#div2').mouseover(function(event) {
    $("#button1").hide();
    $("#button2").show();
    event.stopPropagation();
});

Answer 2

If div2 is positioned on top of div1, there may be an issue when the mouse hovers over the area where both divs overlap. In such cases, both divs may trigger a mouseover event. To prevent this from happening, you can use event propagation on #div2 to ensure that the mouseover event does not transfer down to the underlying div1 when the cursor moves over div2 and into the overlapping region.

$('#div2').mouseover(function(event) {
    $("#button2").show();
    event.stopPropagation(); // prevents mouseover event on other div
});

Similarly, you might want to include code that hides button1 when the mouse transitions from div1 to

div2</code without fully exiting the underlying <code>div1

- specifically in the overlapping zone.

$('#div2').mouseover(function(event) {
    $("#button1").hide();
    $("#button2").show();
    event.stopPropagation();
});

Answer 3

Answer №2

When div two is a child of div one, the hover event on div two bubbles up to div one. To prevent this from happening, you can use event.stopPropagation() like so:

/* CSS */
#button1, #button2 {
    display: none;
}

/* jQuery */

$(function() {

    $('#div2').hover(
        function(event) {
            event.stopPropagation();
            $('#button2').toggle();
        },
        function(event) {    
            event.stopPropagation();   
            $('#button2').toggle();
        });

    $('#div1').hover(
        function() {
            $('#button1).toggle();
        },
        function() {
            $('#button2').toggle();
        });


});

Answer 4

When div two is a child of div one, the hover event on div two bubbles up to div one. To prevent this from happening, you can use event.stopPropagation() like so:

/* CSS */
#button1, #button2 {
    display: none;
}

/* jQuery */

$(function() {

    $('#div2').hover(
        function(event) {
            event.stopPropagation();
            $('#button2').toggle();
        },
        function(event) {    
            event.stopPropagation();   
            $('#button2').toggle();
        });

    $('#div1').hover(
        function() {
            $('#button1).toggle();
        },
        function() {
            $('#button2').toggle();
        });


});

Exploring the connection between two divs using onmouseover and onmouseout events in JavaScript

Answer №1

Answer №2

Similar questions

Ways to control the display of pagination pages in a React application

A guide to incorporating nested loops with the map method in React JS

Fixing the issue: "Tricky situation with JavaScript not working within Bootstrap 4's div tag while JS functions properly elsewhere"

Using Javascript and the Document Object Model (DOM) to parse a Key/Value

Only the (click) event is functional in Angular, while the (blur), (focus), and (focusout) events are not functioning

Adding a hash to asset paths in NextJS static builds

Issue with Showing Hidden Section using Jquery - Try it Out on JSfiddle!

angular dropdowns that cascade

Array of JSON data passed in the request body

Mixed Protocol Error (HTTP/HTTPS)

Issue with SALON theme causing logo to not display on Wordpress site

Display the text area when the "Yes" radio button is clicked, while it remains hidden either by default or when the "No" radio button is selected

When it comes to adjusting the height of an element, there are two ways to go about it: using $(element).height

Convert a number to binary in JavaScript, but display the result as infinity

Having trouble with jQuery loading for the first time

What is the process behind managing today's Google image of the day?

Verify whether the element within an iFrame contains any content

Assign the DatePicker Object to an HTML Element

Align the label vertically with the corresponding input field

Error loading ngsw-worker.js in Angular 7