Using mouseover and mouseout instead of :hover

Question

For a project I want to emulate the css :hover pseudoclass, with a .hover class, that I add/remove on mouseover and mouseout events.
The question is, how much is this affect performance, and how big the difference is?
Here is an example: link

Answer 1

The performance depends on the individual user's computer. You will most likely not see any difference whatsoever on any machine unless JavaScript is disabled. You may wish to consider including some CSS that will will compensate for this in the unlikely event that the user has JavaScript disabled.

Answer 2

What is it you're looking to accomplish by rewriting what CSS can do in JavaScript?

JavaScript will nearly always be slower than CSS. On very simple cases like this, it likely won't be noticeable. However, when you start to get a lot (and think about the number of links a typical site has; for example, StackOverflow has roughly 100 links on this page, alone; it adds up very quickly), you will start to get noticeable slow-downs.

One of the main reasons for this is that you have to fire up the JavaScript processor, find all the elements that match the JavaScript search, and add the event listeners to it. Additionally, JavaScript doesn't have the same access to hardware acceleration that CSS does. This starts becoming a major factor when you start including transitions and transformations that CSS can do.

Don't forget, too, to factor in development and maintenance time. Most people will expect your stated behavior to be in the CSS. When they don't find it there, they'll have to dig around, then mentally parse through JavaScript code to find your pseudo-hover code. This takes time and effort better spent on other things.