Javascript mouseOut不在Safari工作_Javascript_Html

Javascript mouseOut不在Safari工作

javascript html

Javascript mouseOut不在Safari工作,javascript,html,Javascript,Html,我试图制作一个简单的悬停事件，当缩略图悬停时，它会显示一个更大的图像。我遇到了一个问题，因为除了Safari之外，它在任何地方都可以正常工作。有人能帮我吗？：）非常感谢以下是演示：以下是代码： <!DOCTYPE html> <html> <head> <title></title> <style> #content{ width: 960px; height: auto; margin: 100

我试图制作一个简单的悬停事件，当缩略图悬停时，它会显示一个更大的图像。我遇到了一个问题，因为除了Safari之外，它在任何地方都可以正常工作。有人能帮我吗？：）非常感谢

以下是演示：

以下是代码：

<!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>


#内容{
宽度：960px；
高度：自动；
保证金：100px自动0自动；
}
#拇指{
高度：150像素；
宽度：250px；
文本对齐：居中；
}
#大图像{
高度：341px；
宽度：512px；
背景图片：url（'image.jpg'）；
背景尺寸：包含；
显示：无；
}
var thumbImage=document.getElementById（“thumb”）；
var hoverImage=document.getElementById（“大图像”）；
thumbImage.addEventListener（'mousemove'，函数（事件）{
如果（！event）var event=window.event；
var pos=getPos（事件）；
hoverImage.style.top=位置top+30+“px”；
hoverImage.style.left=parseInt（位置左侧/2,10）+“px”；
hoverImage.style.position=“绝对”；
hoverImage.style.display=“block”；
});
thumbImage.addEventListener（'mouseleave'，function（）{
hoverImage.removeAttribute（“样式”）；
});
函数getPos（e）{
变量x=0，y=0；
返回{Top:e.clientY，Left:e.clientX}；
}

这是一个bug

请参阅更多：

查看网站了解更多信息

我正在运行最新的safari dev预览版6.1（8537.54.1），它似乎正在运行。也许答案是“等等…”：我在Safari中看到的东西和在Chrome中看到的一样。您使用的是什么版本，哪些应该发生而没有发生？可能将“mouseleave”更改为“mouseout”？预期的结果是什么？我正在Mac OSX Mountain上运行Safari版本6.0.5（8536.30.1）Lion@NicolaeOlariu这就解决了问题。我不知道为什么，因为我以前两种都试过。（在我将代码粘贴到这里之前，我甚至更改了本地机器上的JSFIDLE。我有两个版本。也许这是一种神奇的方法，我会研究一下。