Detect if a certain element is being hovered

user_12829389 0
Viewed 1157

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)

html javascript
1 Answers

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)

    }
user_102455810
Related