How to detect if a certain tag is being hovered over

Question

I have this code below from another post. It sends a message to the console everytime a certain element with an id was hovered over or not. How would I be able to do the same except it sends a message to the console everytime a certain tag was hovered over.

function isHover(e) {
 return (e.parentElement.querySelector(':hover') === e);
}


var myDiv = document.getElementById('mydiv');;
document.addEventListener('mousemove', function checkHover() {
 var hovered = isHover(myDiv);
 if (hovered !== checkHover.hovered) {
   console.log(hovered ? 'hovered' : 'not hovered');
   checkHover.hovered = hovered;
 }
});

--pure javascript to check if something has hover (without setting on mouseover/out)

What specific tag are you wanting to target? – Phil Mar 25 '20 at 00:52 — Phil, Mar 25 '20 at 00:52

CertainPerformance · Accepted Answer · 2020-03-25T01:12:58.990

2

Add the listener to the document like you're doing, but in the mousemove handler, use .closest to see if the target.target or an ancestor matches a particular tag. For example, for divs:

document.addEventListener('mousemove', ({ target }) => {
  console.log(target.closest('div') ? 'div hovered' : 'no div hovered');
});

<div>some div</div>
<span>some span</span>
<div>some other div
  <span>some nested span in a div</span>
</div>
<ul><li>some li</li></ul>

You can assign to a persistent variable if you like:

let hovered = false;
document.addEventListener('mousemove', ({ target }) => {
  hovered = Boolean(target.closest('div'));
  console.log(hovered ? 'div hovered' : 'no div hovered');
});
document.addEventListener('click', () => {
  console.log('currently:', hovered);
});

<div>some div</div>
<span>some span</span>
<div>some other div
  <span>some nested span in a div</span>
</div>
<ul><li>some li</li></ul>

You can also watch for hover over an <input>:

let hovered = false;
document.addEventListener('mousemove', ({ target }) => {
  hovered = Boolean(target.closest('input'));
  console.log(hovered ? 'input hovered' : 'no input hovered');
});
document.addEventListener('click', () => {
  console.log('currently:', hovered);
});

<div>some div</div>
<span>some span</span>
<div>some other div
  <span>some nested span in a div</span>
</div>
<ul><li>some li</li></ul>
<input>

edited Mar 25 '20 at 01:12

answered Mar 25 '20 at 00:53

CertainPerformance

356,069
52
309
320

so then how would putting a variable inside work? ex: `ishovered ` is set to 1 when div is hovered and opposite for when `ishovered` is set to 0. – coolpigeon2122 Mar 25 '20 at 00:59
I'm not entirely familiar with this sorry if my questions sound a bit stupid. – coolpigeon2122 Mar 25 '20 at 01:00
Ideally, you wouldn't use a persistent variable at all - instead, you'd put all the functionality from a hover inside the listener. If hovered, run code A (whatever it is), else run code B – CertainPerformance Mar 25 '20 at 01:00
Well, I think need to set a variable to something because I have the goal of making something that works like: If body clicked: if hovering over input do nothing; if not hovering over input create a new input. – coolpigeon2122 Mar 25 '20 at 01:04
Ok, then use `=` to assign to a variable – CertainPerformance Mar 25 '20 at 01:06
I do have an issue, this somewhat works but if the input is selected, it will say that no input is being hovered. – coolpigeon2122 Mar 25 '20 at 01:11
Works fine here, see snippet – CertainPerformance Mar 25 '20 at 01:13
https://jsfiddle.net/speciamone/tj7fhub4/ <-- here is my mess. You don't have to go onto it I'll probably find the problem at some point. – coolpigeon2122 Mar 25 '20 at 01:15
YES, I found the problem (I let the hovered value be set inside of a function that looped itself so I moved it out). Thank you so much! – coolpigeon2122 Mar 25 '20 at 01:33

How to detect if a certain tag is being hovered over

1 Answers1