There is currently only one way to set the style for a css pseudo selector; a style sheet. So if you want an element to color red on the (CSS!) "hover event", you have to set the :hover pseudo selector (which is probably the most used pseudo selector), and you must do it with a style sheet one way or the other. This works just the same if you were to create a dynamic style sheet through js, of course.
In contrast, simply setting a style on an element has a variety of ways. You can do it in the style sheet; #element { margin : 5px; }. You can do it "inline"; <img style="border:1px solid red;"/>. You can also do it in js; img.style.border = '1px solid red'; (or even div.setAttribute('style', 'border:1px solid red;');).
In the case of hover, you could mimic it in js of course. Quite easily too, onmouseover and onmouseout are your friends. But why would you want to code this behaviour (historically not as stable as css) if you could simply do it with a CSS hover? I guess because it's not as straightforward in js.
Wouldn't it be lovely if there was an easier way to set a :hover for a specific element? In html something like style="hover::margin=:5px;". In js something like el.style.hover.margin = '5px';.
Syntax set aside, this is just from the top of my head, I'd love for a simple(r) way of being able to set pseudo styles without style sheets.
I realize this idea isn't know. It can't be. And I know the content separate champions will frown upon this. And I don't care... I'm not expecting this to get any attention. I just want to put it out there. Out here :)