Question

我正在尝试制作一个简单的悬停事件，在缩略图悬停时显示更大的图像。我遇到了一个问题，因为除了Safari之外的所有东西都可以正常运行。谁能帮我？ :)非常感谢!!

以下是演示：http://jsfiddle.net/3jpGD/embedded/result/

这是代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#content{
    width: 960px;
    height: auto;
    margin: 100px auto 0 auto;
}
#thumb{
    height: 150px;
    width: 250px;
    text-align: center;
}
#largeImage{
    height: 341px;
    width: 512px;
    background-image: url('image.jpg');
    background-size: contain;
    display: none;
}
</style>

</head>
<body>
<div id="largeImage"></div>
<div id="content">
    <div id="thumb">
        <img src="image.jpg" height="150" width="250" />
    </div>
</div>

<script>
var thumbImage = document.getElementById("thumb");
var hoverImage = document.getElementById("largeImage");

thumbImage.addEventListener('mousemove', function(event){
    if(!event) var event = window.event;
    var pos = getPos(event);
    hoverImage.style.top        = pos.Top + 30 + "px";
    hoverImage.style.left       = parseInt(pos.Left /2, 10) + "px";
    hoverImage.style.position   = "absolute";
    hoverImage.style.display    = "block";
});

thumbImage.addEventListener('mouseleave', function(){
    hoverImage.removeAttribute("style");
});

function getPos(e){
    var x = 0, y = 0;
    return {Top:e.clientY, Left:e.clientX};
}

</script>
</body>
</html>

Answer 1

这是一个错误

了解详情：https://bugs.webkit.org/show_bug.cgi?id=4117

检查网站以了解更多信息

mouseOut在Safari中不起作用

1 个答案: