4

If, for example, you put a CSS hover effect on an element, and also put a JS mouseenter event on it, which one will happen first? Is there any variance with this? Can you control it somehow? Is it possible to force them to execute in a particular order?

porque_no_les_deux
  • 479
  • 1
  • 6
  • 18
  • I'd say both happen (virtually) at the same time, the CSS being forced to be updated when queried by the javascript. – Bergi Feb 06 '14 at 21:32
  • That's the one answer I would bet the house is incorrect. – porque_no_les_deux Feb 06 '14 at 21:32
  • Here's a test, probably works differently in different browsers: http://jsfiddle.net/G9ymv/2/ – Brian Glaz Feb 06 '14 at 21:35
  • 2
    Why, what do you think how it works? Also, for what for would you want to force/control order, do you have actual issues? – Bergi Feb 06 '14 at 21:35
  • I think one must execute first, if only barely, but maybe just enough to cause problems under the right circumstances. As for the situation....the CSS department wrote the page one way, then asked for a different way from the JS department and there's a bitttt of a conflict. – porque_no_les_deux Feb 06 '14 at 21:36
  • 2
    @BrianGlaz: No, the inline style that is set by the JS must always overrule the `:hover` styles. If any browser does it different, he does it wrong. – Bergi Feb 06 '14 at 21:36
  • 1
    What is the underlying issue that makes you think the order will make a difference? Are you needing to get its computed style in a JS handler? – cookie monster Feb 06 '14 at 21:38
  • If you agree with Yahoo, your JavaScript should be right before `

    ` so one would assume CSS is always first in this case. Since JavaScript can manipulate and override CSS, it makes sense for CSS to load first.

     – rybo111 Feb 06 '14 at 21:39
  • @rybo111: That isn't what OP is asking. He wants to know if a style applied by CSS `:hover` selector will be applied consistently before or after a JS `mouseenter` event on the same element. – cookie monster Feb 06 '14 at 21:40
  • This is going to be entirely different based on browser and device (based on layout/CSS/JS rendering engines for various browsers) – Ennui Feb 06 '14 at 21:48

2 Answers2

3

which one will happen first?

Notice that there is no such thing as a "CSS event". However, the behaviour is undefined; you could consider the CSS change and the JS event to happen at the same time. The relevant specs CSS Selectors 4, DOM 3 Events and HTML 5 point out the similarities between hover and mouseenter, but do not specify an order. Mouse event order is specified, but does not refer to CSS user action pseudo classes.

Is there any variance with this?

Yes, browsers are free to implement it either way. They could change the layout and redraw the page before they fire the JS events, or they could not. It should however not make much difference.

Is it possible to force them to execute in a particular order?

I personally would expect in the CSS to be applied already when the JS event handler is executed. Even if it was not yet computed, when querying styles (e.g. getComputedStyle(this)) a CSS recomputation is done so that you should always get the dynamic styles - see also When does reflow happen in a DOM environment?.

Try it out at http://jsfiddle.net/n4Z8H/. While most major browsers will yield the expected value (rgb(0, 0, 255), the blue :hover style), older IEs don't seem to do.

Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • I checked, FF and chrome fire the event after applying the css, but IE fires js event before applying the css. – undone Feb 06 '14 at 21:52
  • You sure the order wouldn't make any difference? What about getting the computed style of an element? One way would provide the "before" state, the other the "after" state. Your last part seems to contradict the second part. – cookie monster Feb 06 '14 at 21:52
  • @undone: You're getting green in which Internet Explorer version exactly? If this is true, I'll have to revise my answer :-(, and need to search the specs to prove that IE is wrong :-) – Bergi Feb 06 '14 at 21:55
  • @cookiemonster: The second part says "change layout and redraw page", *not* "hand uncomputed styles to js". I would always expect the recomputed styles when accessing them from JS - though I could be wrong. – Bergi Feb 06 '14 at 21:58
  • @undone: In IE11 (the only one I have installed) I'm getting blue as well. – Bergi Feb 06 '14 at 22:01
  • I've tried to hunt it down in the specs, but the order seems indeed to be undefined. Still, it should hardly matter in a real application. – Bergi Feb 07 '14 at 00:46
0

Depends a lot on how the browser works, and shouldn't be relied on. Most browsers should run the two at almost exactly the same time. If you want one to execute before/after the other, just control the CSS styling via JavaScript, for example on hover add a class and on not hover remove the class.

Although, if this is an actual issue you have, you're probably doing something wrong.

Zoey Mertes
  • 3,139
  • 19
  • 23
  • But what if a menu is hidden by absolute positioning off screen until that menu category is hovered over, and that same menu uses jquery to slide up and slide down? Won't you get a mouseleave bug where you'll be sliding a menu up that's already been moved off screen? – porque_no_les_deux Feb 06 '14 at 21:50
  • @New2This: Could you please share your code ([edit your question](http://stackoverflow.com/posts/21614449/edit))? The jQuery inline styles should always overrule CSS (pseudo) classes. – Bergi Feb 06 '14 at 21:53