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

Tips for designing a horizontal sub-navigation menu using CSS?

What's the issue with the submit button not functioning on the form?

Angular UI-Grid encountering difficulties in rendering secure HTML content

The textarea in my jquery code struggles to keep up with the amount of text I

Ways to incorporate style links in Angular v2 components?

Send various pieces of information using Jquery/Ajax

The noclose feature in Twitter Bootstrap is malfunctioning when placed within a div

Use jQuery to retrieve the number of items that have been selected in an ASP ListBox

Mastering the Art of Defining SVG Gradients in a Page-wide CSS File

Using jQuery or JavaScript to clear multiple selections in a multiselect dropdown when a button is clicked

Exploring through angular.js with the use of identifiers

When a div is clicked, the Checkbox ("checked",true) is selected, however, the $checkbox.change(function()... does not account for this

When a JavaScript/jQuery open window popup triggers the onunload event after the about:blank page has been

Unable to select image inside linked container

The adhesive navigation bar isn't adhering

The CSS Accordion seems to be the culprit behind the missing margin or border at the top of my page

Resetting several sticky titles after displaying and hiding elements

Is it possible to utilize $.getJSON() with a machine on the identical subdomain?

Is the CSS selector '.my-class *:not(input[type="text"])' accurate?

The functionality of $(selector).css() seems to be malfunctioning