Question

I am wondering how I would be able to modify an existing style that is applied to the hover state of an element via jQuery.

For example:

.button { color:red; }
.button:hover { color:blue; }

I would like to apply the style font-size:14px; to .button:hover. The value of font-size will vary depending on which other elements on the page the user has interacted with previously.

Answer 1

You can’t modify the :hover styles (or any other psuedo-class) using JavaScript, because technically they aren’t part of the DOM.

What you’ll need to do is add those styles to a different class in your CSS, then add/remove that class using JavaScript/jQuery.

CSS:

.button.bigger { font-size:14px; }

jQuery:

$('.button').on('hover', function(e) {
    $(this).toggleClass('bigger');
});