Question

我想要实现的是当光标悬停在图像（img）上时，此图像会在鼠标位置第二次显示。当鼠标离开原始图像时它应该消失。它应该适用于页面上的多个图像。

为此，我写了以下页面：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>        <script>
            var currentMousePos = { x: -1, y: -1 };
            var currentlyZoomed = -1;

            $(document).ready(function(){

                $(document).mousemove(function(event) {
                    currentMousePos.x = event.pageX;
                    currentMousePos.y = event.pageY;
                });

                $('.zoomable').mouseenter(function(){

                    currentlyZoomed = $(this).clone();
                    currentlyZoomed.removeClass('zoomable');
                    currentlyZoomed.css({position: "fixed"});
                    currentlyZoomed.css({left: currentMousePos.x-15, top: currentMousePos.y-15});
                    currentlyZoomed.appendTo($(this).parent());

                });

                $('.zoomable').mouseout(function(){

                    currentlyZoomed.remove();
                    currentlyZoomed = -1;
                });
            });

        </script>
    </head>
    <body>
        <div>
            <img class="zoomable" src="image1.gif"/>
            <img class="zoomable" src="image2.gif"/>
        </div>
    </body>
</html>

不幸的是，Chrome中的结果是克隆的图像＆＃34;闪烁＆＃34;由于某些原因。它每秒出现一次并消失一次。

有任何疑问是什么错？非常感谢提前！

编辑：

想想我是否找到了原因：当克隆图像时，它被放置在光标正下方，因此这显然意味着浏览器鼠标不再悬停在原始图像上，因此触发了mouseout事件！有没有办法让对象对鼠标不可见（-events）？

Answer 1

好吧，有点谷歌搜索自己解决了！问题的原因是我在那里编辑的：新图像与旧图像重叠并触发了旧图像的鼠标移出事件。

为了防止这种情况，我使用了：

currentlyZoomed.css({"pointer-events": "none"});

现在它就像它的意思一样！

使用jQuery悬停时重复图像

1 个答案: