CODEWITHSUNDEEP
jqueryhtmlcss
Jakub M.
Jakub M.

Reputation: 33857

Div transparent for events

I have four div squares in a grid and fifth one overlaying them, in the center:

fiddle http://jsfiddle.net/TLFJh/

HTML:

<div class="wrapper">
    <div id="info">info</div>
    <div id="inn1"></div>
    <div id="inn2"></div>
    <div id="inn3"></div>
    <div id="inn4"></div>
</div>

CSS:

div.wrapper {
    position: relative;
    width:200px;
    height:200px;
}

#inn1, #inn2, #inn3, #inn4 {
    width:100px;
    height:100px;
    float:left;
}
#inn1 { background: blue; }
#inn2 { background: red; }
#inn3 { background: green; }
#inn4 { background: yellow; }

#info {
    position:absolute;
    width:100px;
    height:100px;
    top:50px;
    left:50px;
    border: 1px solid black;
    box-sizing: border-box;
}

With jQuery, I want to bind mouseover() event to the four squares (easy), but I want that they catch the event even if the pointer is over the info box (the box is somehow "transparent" for the events"). Is it possible?

Edit:

the goal is that I display some information pop-up, different for each #inn that follows the pointer, and the pop-ups should be also displayed when the cursor is over info but as it was over inn.

Upvotes: 8

Views: 855

Answers (4)

Chris Marais
Chris Marais

Reputation: 411

Take a look here. I took Eric's simplified html, added jquery.hoverIntent and added a few events so you can see the hover events being fired. I got the hoverIntent plugin here for reference.

Upvotes: 0

Molecular Man
Molecular Man

Reputation: 22386

The only thing that comes to mind is to compare mouse' position and block's position. Here is fiddle.

Upvotes: 2

Frog
Frog

Reputation: 1641

Isn't it possible to calculate which div the mouse is hovering? You can then just create one overlay div and calculate the target div with the mouse position from the event.

Upvotes: 0

fin
fin

Reputation: 93

Is the jQuery event .mouseenter() what you're looking for?

http://api.jquery.com/mouseenter

This will maintain the transparency when in child DIVS of the bound parent.

Upvotes: 0

Related Questions