события mouseover и mouseout в javascript не работают надлежащим образом

Я пытаюсь сделать div, который появляется на мыши над его родительским div и исчезает при мыши. Но когда я ввел мышь в эту область div, она не показывала ясного увеличения высоты, а ее высота мерцала вверх и вниз непрерывно даже при небольшом движении мыши в пределах области (т. Е. Мышь не была выведена из области при скольжении).события mouseover и mouseout в javascript не работают надлежащим образом

См рабочий код: http://jsfiddle.net/ankur3291/xN5bS/

Во-первых, я хочу знать, как Mouseover и MouseOut произведения событий (их истинные смыслы) и, во-вторых, что является средством для этого? Я в основном нахожу решение в чистом javascript, но код jQuery также заметен. Смотрите мой полный код ниже:

<!DOCTYPE html> 
<html> 
<head> 
<title>js height check</title> 
<style type="text/css"> 
#box{display:block;height:200px;width:200px;border:1px solid #000;position:relative;} 
#inner{display:none;height:0;opacity:0.6;background-color:#000;width:200px;position:absolute;bottom:0;} 
</style> 
<script type="text/javascript"> 
function heightUp() 
{ 
var h=20; 
var obj=document.getElementById("inner"); 
obj.style.display="block"; 
function frame() 
{ 
    h=h+5; 
    obj.style.height=h+"px"; 
    if(h>=150) 
     clearInterval(timer1); 
} 
var timer1=setInterval(frame,10); 
} 
function heightDown() 
{ 
var obj=document.getElementById("inner"); 
var h=parseInt(obj.style.height); 
document.getElementById("matter").innerHTML=h; 
function frame() 
{ 
    h=h-5; 
    obj.style.height=h+"px"; 
    if(h>=30) 
    { 
     obj.style.display="none"; 
     clearInterval(timer2); 
    } 
} 
var timer2=setInterval(frame,10); 
//obj.style.height-=100+'px'; 
} 
</script> 
</head> 
<body> 
<div id="box" onmouseover="heightUp()" onmouseout="heightDown()"> 
<div id="inner"> 
</div> 
</div> 
<p id="matter">h</p> 
</body> 
</html>

источник

2014-01-14 Ankur Shah

Прежде всего, события делают соответственно

MouseOver: мышь проходит над этим элементом (это продолжает называть при перемещении мыши по этому элементу Thats проблема)
MouseOut: мышь покидает область элемента

, но самый лучший и самый простой способ Эффект АРХИВ у НУ хотите делаю его JQuery следующего

$(document).ready(function(){ 
    $("#box").hover(function(){ 
    //Mouse Enter 

    $("#inner").animate({height: "200px"}, 500); 
    },function(){ 
    //Mouse Leaves 

    $("#inner").clearQueue(); 
    $("#inner").animate({height: "0px"}, 500); 
    }); 

});

работает Ссылку http://jsfiddle.net/xN5bS/1/

источник

2014-01-14 18:30:33

Вы должны удалить декларации 'onmouseover' и' onmouseout' в HTML на своей скрипке, поскольку они больше не используются. – tkone

Кроме того, возможно, самый простой способ исправить - просто добавить «указатель-события: нет» в CSS для '# inner', но я отвлекся :) – tkone

я забыл удалить вызовы из HTML :), и вы можете будь прав про самый простой способ, но с jquery проще, поскольку у вас есть фреймворк, делающий анимацию для вас, в конце концов, лучший способ зависит от цели кода? –

Проблема здесь состоит в том, что, когда inner поднимается до точки курсора, так как это «сверху» из box элемента, вы больше не технически «над» box элемента , Ergo, пожар mouseout.

Если вы добавите pointer-events: none к вашему объявлению CSS для inner, это будет работать, так как вы сообщаете этому элементу игнорировать события указателя. Таким образом, затененный элемент (box) получит события.

Адрес a fiddle with it fixed.

Также вы не должны использовать атрибуты HTML или onmouseout при назначении обработчиков событий, а делать это через интерфейс addEventListener. (Что в IE8 attachEvent, кстати)

источник

2014-01-14 18:18:27 tkone

На самом деле я хочу поставить некоторые ссылки в этой черной всплывающей DIV, так что делаю 'указателя событие: none' сделает тег анкерного бесполезно (не работает) ... иначе ваш код работает нормально ... но цель не решена. Представьте себе галерею фотографий и, взяв указатель на фотографию, черный прозрачный экран выйдет с некоторыми написанными на нем действиями, и мы можем щелкнуть любой из вариантов события. –

события mouseover и mouseout в javascript не работают надлежащим образом

ответ

Смежные вопросы