サムネイルがホバーされたときに大きな画像を表示する単純なホバー イベントを作成しようとしています。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>