document.querySelectorAll with the pseudo-class :hover not working in FF or IE

Question

I want to get the element under the cursor. When I use document.querySelectorAll(":hover");, it works well in Chrome but it doesn't work in Firefox or IE.

It might be because I use it inside a eventListener in a Google maps. Here how I use it.

google.maps.event.addListener(polygon,"mouseout",function(){
  elementHover = document.querySelectorAll( ":hover" );
  alert(elementHover[elementHover.length-1].id);
});

In Chrome it gives me the id of the element I'm hovering with the cursor, but I get nothing in IE or FF.

Answer 1

Is there a reason you're using mouseout instead of mouseover? It seems like, depending on how the browser resolves it (does it fire the event before you leave, or just after you leave, the object that is listening for the event?) that could cause some consternation. Is there a reason you're not just passing in the Event object to get the object you're leaving, rather than hoping that a selector will fire?

According to Google's docs (https://developers.google.com/maps/documentation/javascript/events#EventArguments), you can pass the event object into the function:

google.maps.event.addListener(polygon,"mouseout",function(evt){
  // get the target from the mouseout event, something like this:
  elementHover = evt.target;
  alert(elementHover[elementHover.length-1].id);
});

I can't test this at the moment, so you'll probbly have to fiddle with it and read into Google's docs to make sure that the event you're looking at gives you a reference to the object that it came from (you might even be able to use "this" instead of evt.target, depending on what gets passed into context). However, :hover is still a semi-flighty beast, and depending on the order in which events are resolved, it's quite possible that you only see it in Chrome because it fires off the events differently than FF and IE.

Good luck!