html - Javascript return id of the element that triggert the event -
i have range of divs (projects) have display:none-ed overlay container inside of them, containing additional info.
if mouse enters outer div, overlay container should recieve class making visible. on mouse leaving class should removed.
solved using onmouseover="setactive('div id')", made code pretty messed tried switch eventlisteners. won't work though , can't figure out why. script far:
// init eventlisteners each container window.addeventlistener("load", start, false); function start() { var project_containers = document.getelementsbyclassname('content-project') (var = 0; < project_containers.length; i++) { project_containers[i].addeventlistener("mouseover", setactive(), false) project_containers[i].addeventlistener("mouseout", setinactive(), false) } } // if mouse on container, add overlay_active class function setactive() { var container = document.getelementbyid(event.currenttarget); var overlay_class = container.getelementsbyclassname("element-overlay")[0]; if (!(overlay_class.classname.match(/(?:^|\s)overlay_active(?!\s)/))) { overlay_class.classname += " overlay_active"; } } // if mouse outside container again, remove overlay_active class function setinactive() { var container = document.getelementbyid(event.currenttarget); var overlay_class= container.getelementsbyclassname("element-overlay")[0]; if (overlay_class.classname.match(/(?:^|\s)overlay_active(?!\s)/)) { overlay_class.classname = overlay_class.classname.replace(/(?:^|\s)overlay_active(?!\s)/g, '') } }
you don't need id set container
, functions this:
function setinactive(e) { var container = e.currenttarget; //your code } }
and call:
project_containers[i].addeventlistener("mouseout", setinactive, false);
Comments
Post a Comment