Сообщение от Грабовский
|
Доброго времени суток, уважаемые программисты!
Есть элемент div id=hovcl, при наведении на него под ним появляется другой div id=kont position=absolute, при отведении от элемента id=kont исчезает. Это всё работает.
Проблема в том что каждый раз когда мышка проскальзывает id=hovcl появляется id=kont (т.е. вывод kont не планировалось).
Как сделать так что б метод hover вступал в действие после того как пройдёт 1 секунда после наведения на элемент id=hovcl ? 
|
Накатал по быстрому - вроде работает
<html>
<head>
<style type = "text/css">
#base {
position:relative;
width:200px;
height:100px;
background-color:blue;
}
#temp {
position:absolute;
width:50px;
height:50px;
background-color:red;
display:none;
}
</style>
</head>
</html>
<body>
<div id = "base"><div id ="temp"></div></div>
<script>
//ф-ция для эмуляции событий mouseenter/mouseleave в старых браузерах
function isOutside(e, parent) {
var relatedTarget = e.relatedTarget;
if (!relatedTarget) {
relatedTarget = (e.type == 'mouseout') ? e.toElement : e.fromElement;
}
while (relatedTarget && relatedTarget !== parent) {
relatedTarget = relatedTarget.parentNode;
}
return !relatedTarget ;
}
var base = document.getElementById("base");
var temp = document.getElementById("temp");
var timerId;
function makeVisible(elem) {
elem.style.display = "block";
}
base.onmouseover = function(e){
e = e || event;
if (!isOutside(e, this)) return; // отсечь событие
timerId = setTimeout(function() {makeVisible(temp)}, 1000);
}
base.onmouseout = function(e){
e = e || event;
if (!isOutside(e, this)) return; // отсечь событие
clearTimeout(timerId);
temp.style.display = "none";
}
</script>