0
Я пытаюсь создать простое зависание, которое показывает увеличенное изображение, когда миниатюра зависает. У меня проблема, потому что она отлично работает во всем, кроме Safari. Может кто-нибудь мне помочь? :) Спасибо!!mouseOut не работает в 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>
Я запускаю последний предварительный просмотр safari dev Версия 6.1 (8537.54.1) и, похоже, там работает. Может быть, ответ «дождитесь его ...» :) – dc5
Я вижу то же самое в Safari, что и в Chrome. Какую версию вы используете и что должно случиться, чего не происходит? – j08691
Может быть, изменить «mouseleave» на «mouseout»? Каким должен быть ожидаемый результат? –