Discovering mouse interactions on overlapping HTML elements

Question

Discovering mouse interactions on overlapping HTML elements

Can mouse events be detected on an object that is adjacent to, but not a child of, another element in the HTML?

For instance:

<style>
#test, test2 {
     width: 100%;
     height: 100%
}
</style>

<html>
    <section class="full" id="test">
    Full Screen 
    </section>


    <section class="anotherFull" id="test2">
    Full Screen As well
    </section>


<script>

        var elem = document.querySelector('#test2');

        elem.addEventListener('hover', function(){
          alert('you are hovering');
        }, false);

</script>
<html>

Even if I hover over the page and try different methods like mouseenter, mouseover, or hover, and examine the e object from

document.addEventListener('hover', function(e){}, false)

; (such as e.target), I cannot detect a hover event on the second adjacent element.

javascript html css

Answer 1

Answer №1

Unique Demo

To solve this issue, one approach is to connect the events in a sequential manner. This can be achieved by utilizing both addEventListener and dispatchEvent functions. For detailed instructions, you can refer to an informative article on MDN titled Custom Event Handling Guide

var
 outer = document.getElementById("outer"),
 inner = document.getElementById("inner")
;

inner.addEventListener('mouseenter',function(e){
 alert('hovering inner');
},false);

outer.addEventListener('mouseenter',function(ev){
 alert('hovering outer');
 this.style.display = "none";
 var tar = document.elementFromPoint(ev.clientX, ev.clientY);
 this.style.display = "block";
 tar.dispatchEvent(new Event('mouseenter'));
},false);

#screen{
    position:relative;
    width:50px;
    height:50px;
}
#outer{
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    width:50px;
    height:50px;
    background-color:blue;
}
#inner{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width:50px;
    height:50px;
    background-color:red;
}

<fieldset>
    <legend>Screen Mockup</legend>
    <div id="screen">
        <div id="outer"></div>
        <div id="inner"></div>
    </div>
</fieldset>

Answer 2

Unique Demo

To solve this issue, one approach is to connect the events in a sequential manner. This can be achieved by utilizing both addEventListener and dispatchEvent functions. For detailed instructions, you can refer to an informative article on MDN titled Custom Event Handling Guide

var
 outer = document.getElementById("outer"),
 inner = document.getElementById("inner")
;

inner.addEventListener('mouseenter',function(e){
 alert('hovering inner');
},false);

outer.addEventListener('mouseenter',function(ev){
 alert('hovering outer');
 this.style.display = "none";
 var tar = document.elementFromPoint(ev.clientX, ev.clientY);
 this.style.display = "block";
 tar.dispatchEvent(new Event('mouseenter'));
},false);

#screen{
    position:relative;
    width:50px;
    height:50px;
}
#outer{
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    width:50px;
    height:50px;
    background-color:blue;
}
#inner{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width:50px;
    height:50px;
    background-color:red;
}

<fieldset>
    <legend>Screen Mockup</legend>
    <div id="screen">
        <div id="outer"></div>
        <div id="inner"></div>
    </div>
</fieldset>

Answer 3

Answer №2

I'm not sure I understand your post completely, so here are a couple of suggestions.

If you're looking to bind a hover event to the sibling of a specific selector that you already know...

JavaScript

const element = document.getElementById('example').nextElementSibling;
element.addEventListener('mouseover', function(event){...});

CSS

#example+div:hover {
    ...
}

IMPORTANT: Remember that HTML id attributes should be unique. Avoid having multiple elements with the same id in your markup.

Answer 4

I'm not sure I understand your post completely, so here are a couple of suggestions.

If you're looking to bind a hover event to the sibling of a specific selector that you already know...

JavaScript

const element = document.getElementById('example').nextElementSibling;
element.addEventListener('mouseover', function(event){...});

CSS

#example+div:hover {
    ...
}

IMPORTANT: Remember that HTML id attributes should be unique. Avoid having multiple elements with the same id in your markup.

Discovering mouse interactions on overlapping HTML elements

Answer №1

Answer №2

JavaScript

CSS

Similar questions

What are the steps to add a Search Box to my HTML Website?

Utilize SVGs efficiently by loading them once and reusing them

JavaScript - asynchronous XMLHttpRequest with increment operation

Having trouble selecting a subset of data from an AJAX request using Jquery?

Creating an Array of dynamically generated elements using jQuery

Removing the initial string before an object can be done by utilizing various techniques and

Encountering an error in Angular where the property 'nativeElement' is undefined when using @ViewChild

Display a new div with its content every 5th item

The MAC slideshow circles at the bottom have been mysteriously chopped off

Within a loop featuring multiple buttons, apply a class toggle specifically to the button that is clicked on

The React-Virtualized Autosizer component is returning a height value of 0 when used with VirtualScroll

The determination of the volume value was impossible using only the values from the object nested within an array

Issue with Jquery Drag and Drop functionality, navigate to a different page

Oops! A JSON parsing error occurred due to the presence of an unexpected token '}'

The default export of Nuxt, referred to as 'mod', could not be located

What is the best way to create a collapsible list menu?

Prevent Buttons from Being Clicked While Another is Active in Angular

WordPress display issue: AMCharts chart won't appear

Learn about generating PDF files with React Native Expo using the react-native-html-to-pdf library!

angularjs ngmodel directive with dual values