jQuery

Question

你们好吗？

我是 jQuery 的完全初学者，我在 parent 元素上使用 mousemove 事件，并且我在 div 基于 cursor's position，但我面临的问题是，当 child div 出现时，我正在徘徊 child div mousemove 不会触发，而它会触发每个其他 child。感谢您的帮助。

HTML代码：

<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代码：

$('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

Answer 1

看看 css 属性指针事件。如果将其设置为 none，则所有鼠标事件都将传递给底层元素。

在您的情况下，它将被添加到 .large 样式中：

.large {
    pointer-events:none;
}

有关详细信息，请查看 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

这是更新后的 fiddle： http://jsfiddle.net/boleary/dnae98w1/

jQuery - 需要帮助 - mousemove 事件

jQuery - need assistance - mousemove event

mouseevent