php - javascript triggers "onmouseover" and "onmouseout" when i hover the div in another div -
i working on grid layout new website. php code:
echo"<div class='model_container_invisible' onmouseover='fade(this, 0)' onmouseout='fade(this, 1)'>"; echo"<span class='model_title_wrapper'>"; echo"<span class='model_title'>ancient dragon</span>"; echo"<span class='model_designer'>designed kamiya satoshi</span>"; echo"</span>"; echo"<img class='model_img' src='img/models/001.jpg' />"; echo"</div>";
this on grid element. opacity of image 0.5, want change when hover element js function fade(). here code:
function fade(elem, direction) { /* if(elem.classname == "model_container_invisible") elem.classname = "model_container_visible"; else elem.classname = "model_container_invisible"; */ var img = elem.getelementsbytagname("img")[0]; //das bild if(direction == 0) //einblenden { alert("fadein, this: "+elem); img.style.opacity = 0.5; var aktiv = window.setinterval(function() { img.style.opacity = string(number(img.style.opacity) + .05); if(number(img.style.opacity) >= 1.0) { window.clearinterval(aktiv); } }, 8); } else //ausblenden { alert("fadeout, this: "+elem); img.style.opacity = 1; var aktiv = window.setinterval(function() { img.style.opacity = string(number(img.style.opacity) - .05); if(number(img.style.opacity) <= 0.5) { window.clearinterval(aktiv); } }, 16); } }
but when mouse pointer moves on div div (lets model_title_wrapper model_titel), function called again. dont it!
can please me? thanks!
use onmouseenter
instead of onmouseover
later fire event when hovering in child elements, while onmouseenter
not (the event not bubble up).
see info onmouseenter/onmouseleave
events should use:
Comments
Post a Comment