Hover over the hidden DIV

Question

Hover over the hidden DIV

I have a div containing an image that is overlapping multiple other divs. It looks something like this:

<div style='width:100%;height:100%'><img src='someImage.png'></div>
<div id='covered'>I'm underneath the div above me, but still visible</div>

I am trying to set up a jQuery event handler as follows:

$('#covered').live('mouseover',function(){ do stuff });

However, the mouseover event is not working due to the overlapping div. Is there a way to make this work?

(Additional information: The covering div has a higher z-index for proper layering, and I am using "live" because #covered is dynamically generated.)

jquery css

Answer 1

Answer №1

In the event that the overlay shares the same dimensions as the #covered element, you can simply attach a listener to the mouseover event for the overlay:

$(document).delegate('#overlay', 'mouseover', function () { /*execute code for `#covered` element*/ });

Updated Information

If the overlay is positioned over the entire page, you can utilize the mousemove event to determine if the cursor has been moved onto the #covered element:

var coveredOffset = $('#covered').offset(),
    coveredWidth  = $('#covered').width(),
    coveredHeight = $('#covered').height();
$('#overlay').on('mousemove', function (event) {
    if (event.pageX > coveredOffset.left && event.pageX < (coveredOffset.left + coveredWidth) && event.pageY > coveredOffset.top && event.pageY < (coveredOffset.top + coveredHeight)) {
        console.log('You are mouse-overing #covered');
    }
});

Check out this live demonstration: http://jsfiddle.net/WjRNv/1/ (ensure to monitor your browser's console for logs when hovering over the #covered element)

Answer 2

In the event that the overlay shares the same dimensions as the #covered element, you can simply attach a listener to the mouseover event for the overlay:

$(document).delegate('#overlay', 'mouseover', function () { /*execute code for `#covered` element*/ });

Updated Information

If the overlay is positioned over the entire page, you can utilize the mousemove event to determine if the cursor has been moved onto the #covered element:

var coveredOffset = $('#covered').offset(),
    coveredWidth  = $('#covered').width(),
    coveredHeight = $('#covered').height();
$('#overlay').on('mousemove', function (event) {
    if (event.pageX > coveredOffset.left && event.pageX < (coveredOffset.left + coveredWidth) && event.pageY > coveredOffset.top && event.pageY < (coveredOffset.top + coveredHeight)) {
        console.log('You are mouse-overing #covered');
    }
});

Check out this live demonstration: http://jsfiddle.net/WjRNv/1/ (ensure to monitor your browser's console for logs when hovering over the #covered element)

Answer 3

Answer №2

One solution is utilizing the CSS property pointer-events: none. However, keep in mind that this may not be compatible with IE versions older than 9 and could have issues in IE9 in certain scenarios.

Alternatively, it might be more effective to reconsider your styling strategy. If the overlapping element's DIV is transparent, there is a possibility that it could end up behind elements currently positioned below it.

Answer 4

One solution is utilizing the CSS property pointer-events: none. However, keep in mind that this may not be compatible with IE versions older than 9 and could have issues in IE9 in certain scenarios.

Alternatively, it might be more effective to reconsider your styling strategy. If the overlapping element's DIV is transparent, there is a possibility that it could end up behind elements currently positioned below it.

Answer 5

Answer №3

$('#hidden').on('mouseover',function(){ perform actions });

Answer 6

$('#hidden').on('mouseover',function(){ perform actions });

Answer 7

Answer №4

$('#covered').on('mouseover', function(){do something}).on('mouseout', function(){do even more things});

Alternatively, if the issue lies with the covering div, consider using CSS to position the image there. Taking advantage of CSS 3's ability to support multiple backgrounds can simulate a Photoshop layer effect. This approach will maintain the visual consistency while ensuring smooth functionality of your JavaScript code.

Answer 8

$('#covered').on('mouseover', function(){do something}).on('mouseout', function(){do even more things});

Alternatively, if the issue lies with the covering div, consider using CSS to position the image there. Taking advantage of CSS 3's ability to support multiple backgrounds can simulate a Photoshop layer effect. This approach will maintain the visual consistency while ensuring smooth functionality of your JavaScript code.

Answer 9

Answer №5

To create a unique approach, consider comparing the x and y values of the mouse's position with the top and left offset of the specified div element in order to detect the event accurately.

let topOffset = $("#cover").offset().top,
    leftOffset = $("#cover").offset().left,
    bottomOffset = topOffset + $("#cover").height(),
    rightOffset = leftOffset + $("#cover").width();
$("body").on("mousemove", function(e){
    let mouseX = e.pageX,
        mouseY = e.pageY;
    if(pageX > leftOffset && pageX < rightOffset && pageY > topOffset && pageY < bottomOffset){
        // Mouse is within boundaries
    } else {
        // Mouse is not within boundaries
    }
});

This method may encounter issues with padding, margins, etc. and can be challenging to maintain, but it offers a logical solution.

Answer 10

To create a unique approach, consider comparing the x and y values of the mouse's position with the top and left offset of the specified div element in order to detect the event accurately.

let topOffset = $("#cover").offset().top,
    leftOffset = $("#cover").offset().left,
    bottomOffset = topOffset + $("#cover").height(),
    rightOffset = leftOffset + $("#cover").width();
$("body").on("mousemove", function(e){
    let mouseX = e.pageX,
        mouseY = e.pageY;
    if(pageX > leftOffset && pageX < rightOffset && pageY > topOffset && pageY < bottomOffset){
        // Mouse is within boundaries
    } else {
        // Mouse is not within boundaries
    }
});

This method may encounter issues with padding, margins, etc. and can be challenging to maintain, but it offers a logical solution.

Hover over the hidden DIV

Answer №1

Updated Information

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tailwind CSS - when it comes to styling, larger screen media queries are taking precedence over smaller media queries

Rotation of Weekly Menus

What's the trick to making a column that's 2/3 wide in a 34grid layout?

Expanding the `div` element to visually occupy the entire vertical space

Steps for revealing all the information from a database when clicking on the 'Read More' button

Can you explain the significance of "q" and "+" within the CSS properties of the HTML body tag?

Utilizing Python and Selenium to Locate an Element Based on Text Within a Span Class

assigning a variable using jQuery

"jQuery Ajax function running smoothly on my local machine, but encountering issues when deployed on the server

Collection of HTML elements that need to stay in the same section

JQuery Mobile Navigation with Bootstrap 3 Sidebar on the Go

Include a series of interconnected models within a primary model prior to rendering on the screen

Tips on creating reusable scoped styles for 3 specific pages in Vue.js without impacting other pages

The absolute CSS dropdown isn't visible, but the relative one is displaying properly

Discovering the largest element within a group to establish the height for the rest

Tips for managing the most recent keyup event in a search feature

Make sure to keep "display:inline-block" in place while using fadeTo()

Dealing with a section that won't stay in place but the rest of the webpage is

Shifted picture next to the accompanying words

Setting the child elements of a CSS div to have the same width and be larger than the