Detect if a certain element is being hovered

Question

I want to detect if any input element is being hovered over. I have this code below that doesn't work because the .hover() function activates after the if statement occurs (which is weird to me). So is there another way to do this?

function createInput(event) {
   thing = 0;
     $("input").hover(function() {
       thing = 1;
     })

     if (thing == 0) {
//create a new input bar
     }
   }

(I don't want to use jquery for this as it does not work)

I want something like this however the code below only works for situations where you want to see if a certain element with an ID is being hovered. It will not work if you want to see if all elements with a certain tag are being hovered:

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)

Codebreaker007 · Answer 1 · 2020-03-25T08:14:56.477

As your question is tagged javascript:

<!DOCTYPE html>
<html>
<body>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>

<script>
function bigImg(x) {
  x.style.height = "64px";
  x.style.width = "64px";
}

function normalImg(x) {
  x.style.height = "32px";
  x.style.width = "32px";
}
</script>

</body>
</html>

For others finding the question Here a solution (generic) for the OP

 var createInput = 0;
 var inputNumber = 0 ;
  // Case: some Inputs are already defined so we attach the event listener to these
var hoverElements = document.getElementsByClassName("hoverElement");
    for (var i = 0; i < hoverElements.length; i++) {
        hoverElements[i].addEventListener("onmouseover", function(event){
            createInput = 1;
            inputNumber = i+1;
            createNewInput(inputNumber);
            }

    function createNewInput(inputNumber){
    // ...called when mouse pointer enters object ...
   createInput = 0;   // We change the overall state var has tobe unlocked by some other event otherwise hovering would create 100reds of inputs, e.g. finishing input in the last field sets it again to 1
 inputNumber = inputNumber +1;  // Increment the number to get unique IDs
    var template = document.getElementById("inputTemplate").cloneNode(true);
    template.setAttribute("id", "input" + inputNumber);
 ... somemore styling and functions you need ...

    document.getElementById("divWeAppendTo").appendChild(template);


  .... some logic to attach the event listener to the new input (see above how its done)

    }

I'm not entirely sure what this will change. I want some sort of thing that tells me something like: if inputHovered == true, dont do this. — coolpigeon2122, Mar 24 '20 at 21:43
Yes I understand the function I provided means you have to attach an eventlistener to all the objects you need it to (is onmouseover when the pointer enters the area and is onmouseout when leaving) You have ato attach the eventlistener to all objects you need. Like see my edit — Codebreaker007, Mar 24 '20 at 22:11
But doesnt that just add the onmouseover function to all the created elements? How would that be different from before from having a .hover function for all inputs? I need thing to be set back to be 0 because if the user is not hovering over an input, another input should be created. That is why I need some sort of true or false statement. — coolpigeon2122, Mar 25 '20 at 00:00
Yes that would be instead of the doSomethingFunction() ==> create new Input function and attach event listener. How you do it depends on your overall programm logic. E.g. Completely JS generated HTML vs templated HTML vs Basic fix HTML to which you add some elements via JS. — Codebreaker007, Mar 25 '20 at 07:50
See my edit for example for the templated case. AND read the comments as a help — Codebreaker007, Mar 25 '20 at 08:15

Detect if a certain element is being hovered

1 Answers1