Modify CSS Applied to Hover State

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.

modify...where? Adding it to the .button:hover css is out of the question I assume? — Jason
– Jason, Commented Dec 11, 2012 at 18:09

Blazemonger · Accepted Answer · 2012-12-11 18:16:38Z

4

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');
});

edited Dec 11, 2012 at 18:16

answered Dec 11, 2012 at 18:09

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Blazemonger Over a year ago

As always, keep in mind that your hover styles won't work on touchscreen devices.

Jon Over a year ago

Thats OK. I'm just building for desktop :)

Don Boots Over a year ago

Oh I was too slow. +1 for being much quicker! :)

Jai · Accepted Answer · 2012-12-11 18:17:47Z

2

what about this with css:

.button:hover { color:blue; font-size:14px;}

and with jQuery:

 $('.button').hover(function(){
    $(this).css({"font-size":"14px"}); // increases on mouseover
 },function(){
    $(this).css({"font-size":"12px"}); // decreases on mouseout
 });

answered Dec 11, 2012 at 18:17

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Don Boots · Accepted Answer · 2012-12-11 18:16:28Z

You would need to either make an event handler in jQuery or make a class specific hover in CSS.

Here is a working example of both:

http://jsfiddle.net/dboots/GHzSs/

JS:

$('#large').hover(function(e) {
        var t = $(this);
        t.css('fontSize', '14px');
}, function(e) {
        var t = $(this);
        t.css('fontSize', '11px');
});

HTML:

<div class="button">Regular Button</div>
<div class="button large">Large Button (by class/css)</div>
<div class="button" id="large">Large Button (by id/jquery)</div>

CSS:

.button {
    padding: 5px;
    border: 1px solid #999999;
    width: 250px;
    margin: 5px 0;
}

.button:hover {
    border: 1px solid #000000;
}

.large:hover {
    font-size: 14px;
}

Praveen Puglia · Accepted Answer · 2012-12-11 18:23:32Z

1

add some class or id to your button..target it using jquery and add css to it.

e.g.

$('.buttonToBeChanged').on('hover',function(){
    $(this).css('font-size',14);
});

That should do. See this for reference. http://api.jquery.com/css/

EDIT : The code will set the font to 14px after that. even after hover out. To give it a toggle effect, use the answer by @Blazemonger. That is just fine. Or you can use mouseenter and mouseout events

EDIT AGAIN - CSS too will do the job alone as @Jai mentioned.

.button:hover { color:blue; font-size:14px;}

edited Dec 11, 2012 at 18:23

answered Dec 11, 2012 at 18:12

Praveen Puglia

5,6595 gold badges38 silver badges71 bronze badges

2 Comments

Fabrício Matté Over a year ago

hover may take 2 functions as arguments. In that case it is a shorthand for mouseenter and mouseleave. If you pass solely one function, it will attach the same function to both mouseenter and mouseleave.

Praveen Puglia Over a year ago

Thats right! absolutely. I just showed a way. Now the answer has been edited to answer all the queries.

Collectives™ on Stack Overflow

Modify CSS Applied to Hover State

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related