56

CSS's "hovered state" will trigger when the user hovers over an element:

<style>
.element{

}
.element:hover{
    background-color:red;
}
</style>

How can we set the element to "hovered state" using Javascript?

Is it possible?

Improve this question
10
  • Seems like you taking a hammer to stick what apears to be not a nail. What are you trying to do exactly? Commented Jun 20, 2011 at 5:02
  • like when do you want to trigger it?? Commented Jun 20, 2011 at 5:02
  • 1
    @Balanivash: nevermind that. Why does he want to trigger hover on it's own? Why shouldn't he copy-paste the style and use element.className = 'newClass'? Commented Jun 20, 2011 at 5:04
  • 4
    Here's my use case: I'm mirroring a page over WebSockets using DOM Mutation Observers. :hover state is not in the DOM so need some other generic way to handle it. Commented Mar 13, 2015 at 12:02
  • @the_drow, Have a trip to stackoverflow.com/questions/1590831/… Commented Mar 13, 2015 at 15:28

2 Answers 2

Reset to default
33

If you could accept using :focus instead of hover, you can use:

var links = document.getElementsByTagName('a');
links[0].focus();

JS Fiddle demo.

Or

var linkToFocus = document.getElementById('link');
linkToFocus.focus();

JS Fiddle demo.

This approach, obviously, requires adapting your CSS to include the a:focus style:

a:link, a:visited {
    background-color: #fff;
}
a:hover, a:focus, a:active {
    background-color: #f00;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

But why would one do such a thing?
@the_drow: I have absolutely no idea; but I'd suspect that it's to show/highlight something on page-load, maybe? There are better ways of doing that, of course, but without further information I can only try to answer the question that was asked. Irrespective of the use-case, sadly.
Good answer, but the question asked how to trigger ":hover", not ":focus".
@the_drow: This could be useful when creating a components-demo-page, where you want to show the different button styles in their different states (neutral, disabled, hovered, focused, active).
@the_drow This could be used for example when you want to quickly automate minor tasks via the DevTools wherein additional elements are only revealed/added to DOM when hovered.
|
32

You're probably better off duplicating the :hover styles into another class and then just adding that class name to the element when you want them to change permanently. Pseudo-classes are "pseudo" for a reason.

Improve this answer

11 Comments

This is what I'm doing right now and am looking for better alternatives.
I'm not sure what definition of "better" you're looking for. Dynamically triggering a class through JavaScript should use a proper class and not a pseud-class. The entire purpose for :hover is to only be used when a user hovers over an element. This is expressly why JavaScript methods like the Element.classList (developer.mozilla.org/en-US/docs/Web/API/Element/classList) collection exist.
That doesn't explain it. It begs the question Why is hover not a trusted event?
Not being a member of the W3C I can only hazard a guess, but this article (smashingmagazine.com/2013/11/12/an-introduction-to-dom-events) on Smashing Magazine sheds a little light: An event is said to be “trusted” when it originates from the device itself, not synthesized from within JavaScript. You're trying to simulate a hover event rather than it being triggered naturally. Of course you can simulate click events without actually tapping on a mouse button easily enough so it's not a hard standard obviously. Browsers are more forgiving with click but not with hover, apparently.
Exactly, it seems totally arbitrary that we are allowed to call "focus" but not "hover".
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.