Find out if an element has a CSS "hover" pseudo-class defined?

Question

Let's say I have the following HTML:

<div id="mydiv">Hello</div>

<style>
#mydiv {
    background-color: yellow;
}

#mydiv:hover {
    background-color: red;
}
</style>

Using JavaScript, how would I determine whether #mydiv has the "hover" pseudo-class rule applied to it?

Ideally, it would be a function like the following:

function HasHoverPseudoClass(element){
    //if element has the "hover" pseudo-class then
    //return true
    //else
    //return false
}

You can try with html event attributes onmouseover and onmouseout — Alejandro Maliachi Quintana, Aug 30 '18 at 18:31
this might help you : https://stackoverflow.com/questions/14795099/pure-javascript-to-check-if-something-has-hover-without-setting-on-mouseover-ou — sdn404, Aug 30 '18 at 18:36
I believe @sdn404 's answer is more directly related to the question than the duplicate post LGSon provided. — Michael Sorensen, Aug 30 '18 at 18:39
@MichaelSorensen So I added that link as well to the dupe list — Asons, Aug 30 '18 at 18:49
Based on a few comments, are you asking how to check if the `#mydiv` is actually hovered, or whether it has a pseudo class assigned to it? — Asons, Aug 30 '18 at 18:52

JoelDoryoku · Answer 1 · 2018-08-30T18:37:33.257

0

You can use Event mouseover:

With JS:

var div = document.getElementById("mydiv");

div.addEventListener("mouseover", HasHoverPseudoClass);

    function HasHoverPseudoClass(){
        //if element has the "hover" pseudo-class then
        //return true
        //else
        //return false
    }

With JQuery:

$("#mydiv").mouseover(HasHoverPseudoClass);

function HasHoverPseudoClass(){
            //if element has the "hover" pseudo-class then
            //return true
            //else
            //return false
        }

I hope it's helps ;)

edited Aug 30 '18 at 18:37

answered Aug 30 '18 at 18:31

JoelDoryoku

364
3
11

OP doesn't ask how to do "hover" with script, they ask if a given element have the "hover" class set in the CSS – Asons Aug 30 '18 at 18:32
He asks: "Using JavaScript, how would I determine whether #mydiv has the "hover" pseudo-class rule applied to it?" And my answer is If you run the mouseover event with an alert(for example), he can see if the :hover is active, since it is the same, right? – JoelDoryoku Aug 30 '18 at 18:41
You might be correct with that interpretation, so I asked the OP and will await their answer – Asons Aug 30 '18 at 18:53
And btw, the title, which I based my actions on, says _"Find out if an element has a CSS “hover” pseudo-class **defined**?"_ – Asons Aug 30 '18 at 19:43

Find out if an element has a CSS "hover" pseudo-class defined?

1 Answers1