0
미리보기 이미지가 표시 될 때 큰 이미지를 보여주는 간단한 마우스 오버 이벤트를 만들려고합니다. Safari를 제외한 모든 기능이 정상적으로 작동하므로 문제가 발생합니다. 누구든지 나를 도울 수 있습니까? :) 정말 고마워!!Safari에서 mouseOut이 작동하지 않습니다.
<!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>
최신 사파리 dev 미리보기 버전 6.1을 실행하고 있습니다. (8537.54.1) 거기에서 일하는 것 같습니다. 어쩌면 대답은 "기다려야합니다 ..."입니다. :) – dc5
Chrome에서와 마찬가지로 사파리에서도 같은 결과가 나타납니다. 어떤 버전을 사용하고 있으며 어떤 일이 일어나지 않아야합니까? – j08691
'mouseout'을 'mouseleave'로 변경 하시겠습니까? 기대되는 결과는 무엇입니까? –