2013-08-14 5 views
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> 
+0

최신 사파리 dev 미리보기 버전 6.1을 실행하고 있습니다. (8537.54.1) 거기에서 일하는 것 같습니다. 어쩌면 대답은 "기다려야합니다 ..."입니다. :) – dc5

+0

Chrome에서와 마찬가지로 사파리에서도 같은 결과가 나타납니다. 어떤 버전을 사용하고 있으며 어떤 일이 일어나지 않아야합니까? – j08691

+4

'mouseout'을 'mouseleave'로 변경 하시겠습니까? 기대되는 결과는 무엇입니까? –

답변

관련 문제