使用jQuery悬停时出现重复图像

Duplicate image when hovering with jQuery

本文关键字：图像 jQuery 悬停 使用      更新时间：2024-05-16

我想要实现的是，当光标悬停在图像（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中的结果是，由于某种原因，克隆的图像会"闪烁"。它大约每秒出现和消失一次。

知道怎么了吗？非常感谢！

编辑：

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

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

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

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

现在它的工作方式就像它的本意！

相关文章：