CODEWITHSUNDEEP
jquerymouseevent
Talha Abrar
Talha Abrar

Reputation: 882

jQuery - need assistance - mousemove event

how are you guys?

i am a complete beginner in jQuery, and i'm using mousemove event on parent element, and i am fading in a div based on cursor's position, but the problem i am facing is, when that child div appears, and i am hovering that child div the mousemove does not fire, while it fires for every other child. any help is appreciated.

HTML Code: 

<table class="maintable">

<div class="large"></div>

    <tr>
        <td >

            <img class="enlargeimg" src="" />

        </td >
    </tr>

</table>

CSS:

* {margin: 0; padding: 0;}

.maintable {width: 400px; height:400px; 
margin: 50px auto; 
position: relative; 
background-color: blue; padding: 30px;}

.large {
    width: 175px; height: 175px;
    position: absolute;

    z-index:5;

    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);





    display: none;
}

.maintable img { width:200px; height: 200px; display: block; background-color: red; }

Jquery Code:

$('table.maintable').on('mousemove' , function(e){

$(".large").css({
        left: e.pageX - $(".large").width()/2,
        top: e.pageY  - $(".large").height()/2
}).fadeIn();

});

Here is a fiddle

Upvotes: 1

Views: 38

Answers (1)

GiantLeprechaun
GiantLeprechaun

Reputation: 134

Take a look at the css property pointer-events. If you set it to none, then all your mouse events will be passed along to the underlying elements.

In your case, it would be added to the .large style:

.large {
    pointer-events:none;
}

For more information, check out https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Here is an updated fiddle: http://jsfiddle.net/boleary/dnae98w1/

Upvotes: 1

Related Questions