Lucy Posted March 31, 2015 Share Posted March 31, 2015 I'm trying to write something that will detect whether my drop down menu is being hovered over (hence, show the menu) or not (hide the menu). This solution does work: document.onmouseover = function(event) { if (event.target.parentElement === null || event.target.parentElement.parentElement === null || event.target.parentElement.parentElement.parentElement === null) { hide(); } else if (event.target.parentElement === menu || event.target.parentElement.parentElement === menu || event.target.parentElement.parentElement.parentElement === menu) { show(); } else { hide(); }; However, I have two problems with it. First, it's not exactly succinct. Second, presumably if the DOM were altered in some way it might not work anymore. I did come up with this function to be used in place of the code block above: function getParents(elem) { var a = elem; var parents = []; while (a) { a = a.parentElement; parents.push(a); } for (var b = 0; b < parents.length; b++) { if (parents[b] === menu) { show(); break; } else { hide(); }; }; } However, that doesn't work properly, as each time you hover over one of the menu items it re-shows the menu. Can anyone suggest another way of doing this (don't worry about writing the code out for me, I just need a hint)? If you need more code, let me know, wasn't sure how much to post as it's quite long. Link to comment Share on other sites More sharing options...
Ingolme Posted March 31, 2015 Share Posted March 31, 2015 You should be adding the event listener specifically to the element you want to hover over and not just the document in general. Dropdown menus can be done purely with CSS without the need of Javascript by using the :hover pseudo-class. There are many resources online: https://www.google.com/?gws_rd=ssl#q=css+dropdown+menu Link to comment Share on other sites More sharing options...
Lucy Posted March 31, 2015 Author Share Posted March 31, 2015 Well, I understand that, but the problem is getting it to hide the menu when it isn't being hovered over. I came up with this just now, though, which seems to work : function getParents(elem) { var a = elem; var parents = []; while (a) { a = a.parentElement; parents.push(a); } console.log(parents.indexOf(menu)); if (parents.indexOf(menu) >= 0) { show(); } else { hide(); }; } Also, thanks for the link! I didn't know you could use CSS. I'm mainly doing this to practice Javascript, but still, good to know. Link to comment Share on other sites More sharing options...
Ingolme Posted March 31, 2015 Share Posted March 31, 2015 There's a mouseout event which fires when the mouse leaves an element. Link to comment Share on other sites More sharing options...
Lucy Posted March 31, 2015 Author Share Posted March 31, 2015 Yeah, I tried that too, but it detected moving through the menu as 'leaving', unfortunately. Resulting in the menu constantly fading in and out. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now