Форум

Грабовский · #1 (**permalink**) 18.02.2012, 13:35

Доброго времени суток, уважаемые программисты!

Есть элемент div id=hovcl, при наведении на него под ним появляется другой div id=kont position=absolute, при отведении от элемента id=kont исчезает. Это всё работает.

Проблема в том что каждый раз когда мышка проскальзывает id=hovcl появляется id=kont (т.е. вывод kont не планировалось).

Как сделать так что б метод hover вступал в действие после того как пройдёт 1 секунда после наведения на элемент id=hovcl ?

tadjik1 · #2 (**permalink**) 18.02.2012, 16:14

если это работает на жс, то можно просто через сетинтервал:

setInterval(function(){
 $('#kont').show();
}, 1000);

Shaci · #3 (**permalink**) 18.02.2012, 16:24

Сообщение от Грабовский

Доброго времени суток, уважаемые программисты!

Есть элемент 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>

Грабовский · #4 (**permalink**) 18.02.2012, 17:58

Всё работает идеально.
Спасибо, Shaci.

Форум

Справочник

Discord чат

Курсы javascript