CODEWITHSUNDEEP
jqueryhtmlcss
Jon
Jon

Reputation: 8511

Modify CSS Applied to Hover State

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.

Upvotes: 0

Views: 188

Answers (4)

Praveen Puglia
Praveen Puglia

Reputation: 5631

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

Upvotes: 1

Jai
Jai

Reputation: 74738

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

Upvotes: 2

Blazemonger
Blazemonger

Reputation: 92893

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

Upvotes: 4

Don Boots
Don Boots

Reputation: 2166

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

Upvotes: 1

Related Questions