79

I would know if it is possible somehow to trigger the CSS HOVER effect with JS, without having to use a additional class...

Here is an example of what i want to do: http://jsfiddle.net/pXbMZ/2/

i have tried fireing the effect using mouseenter() but this does not trigger the CSS hover effect.

PS: I have made a function that helps a user using a online CMS. The help function shows you how to do stuff by moving a image around that shows you how to use stuff. The virtual cursor can click stuff, show elements etc.. But i would like this virtual cursor to tigger the :hover effects set in the CSS as well.

meo
  • 30,872
  • 17
  • 87
  • 123
  • 7
    I used to like Winnie the Pooh when I was kid too... :) – Jacob Relkin Dec 03 '10 at 15:43
  • I _still_ like Winnie-the-Pooh. The original A A Milne stuff, that is, not the awful Disney bastardisation of it. – Chowlett Dec 03 '10 at 15:47
  • For those of you who don't get the joke, Tigger is the name of the tiger in Winnie the Pooh. – Jacob Relkin Dec 03 '10 at 15:48
  • 1
    This concept really doesnt make sense to me. You are trying to trigger a state that is invalid. If the page loads and the user's mouse is not on hovering on the div then how can you set it programatically. The two states are contradictory. – Josiah Ruddell Dec 03 '10 at 15:48
  • I want to use this to simulate a user interaction. I do a function that shows the user what to do. For this i have a mouscursor as img that moves around on the page, when it hovers a link, i would like the CSS hover effect to be triggerd. – meo Dec 03 '10 at 15:50
  • The real question is: why are you so determined not to do it the right way - ie `addClass()`? What would be the difference between setting hover mode and adding a like-hover class? – Spudley Dec 03 '10 at 15:55
  • because it needs to be a solution that applies on a lot of different themes. And i can edit all the themes that the different designers have made. It come in form of an aditional plugin that the user can add in his CMS. – meo Dec 03 '10 at 16:01
  • I have a similar problem with this on devices for instance ipad and android devices. I have preventedDefault for the touch start so I wont have to deal with the user sliding the page when clicking certain items of the page. How ever this also disables all other default behaviours. I would like to bring some of them back though for instance the hover behaviour. I know it can be implemented in other ways but if I do that I will need to maintain two functionalities. Any leads on this? – Pablo Jomer Mar 19 '13 at 13:50

4 Answers4

54

I know what you're trying to do, but why not simply do this:

$('div').addClass('hover');

The class is already defined in your CSS...

As for you original question, this has been asked before and it is not possible unfortunately. e.g. http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

However, your desired functionality may be possible if your Stylesheet is defined in Javascript. see: http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

Hope this helps!

Zoey Mertes
  • 3,139
  • 19
  • 23
Nick G
  • 960
  • 6
  • 7
43

You can't. It's not a trusted event.

Events that are generated by the user agent, either as a result of user interaction, or as a direct result of changes to the DOM, are trusted by the user agent with privileges that are not afforded to events generated by script through the DocumentEvent.createEvent("Event") method, modified using the Event.initEvent() method, or dispatched via the EventTarget.dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, while untrusted events have a isTrusted attribute value of false.

Most untrusted events should not trigger default actions, with the exception of click or DOMActivate events.

You have to add a class and add/remove that on the mouseover/mouseout events manually.

Side note, I'm answering this here after I marked this as a duplicate since no answer here really covers the issue from what I see. Hopefully, one day it'll be merged.

Community
  • 1
  • 1
Benjamin Gruenbaum
  • 270,886
  • 87
  • 504
  • 504
8

I don't think what your asking is possible.

See: Hover Item with JQuery

Basically, adding a class is the only way to accomplish this that I am aware of.

Community
  • 1
  • 1
brendan
  • 29,308
  • 20
  • 68
  • 109
  • 1
    thank you this is actually the first awnser or comment to this question that helps me. – meo Dec 03 '10 at 16:03
-3

If you bind events to the onmouseover and onmouseout events in Jquery, you can then trigger that effect using mouseenter().

What are you trying to accomplish?

DrewBowman
  • 100
  • 5
  • 1
    i have edited my post. I dont want to trigger the JS mouseenter event i want to trigger the CSS:hover – meo Dec 03 '10 at 15:55