css toggleClass in jquery?

Question

i want to toggle between designs

/* Heart sign */
.fav {
    margin-left: 0px;
    color: #0099CC;
    padding-left: 20px;
    padding-right: 4px;
    padding-bottom: 4px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: url(../images/heart-icons.png) no-repeat 4px 4px;
}

fav:hover {
    cursor: pointer;
    margin-left: -1px;
    margin-right: -1px;
    background-color: #EDEDED;
    border: 1px solid #999999;
    background: url(../images/heart-icons.png) no-repeat 4px -13px #EDEDED;
}

jquery:

$('.fav').live('click', function(e){

    $(this).toggleClass('fav:hover');

    });

but this is not working!!! any help please

i was thinking to give the fav:hover another name so jquery knows, but then i might lose the hover effect intially, but what i want is when the user clicks on the .fav is to take the hover state, if this makes sense. — getaway
– getaway, Commented Feb 8, 2011 at 2:52

deceze · Accepted Answer · 2011-02-08 02:55:42Z

4

Solution without Javascript:

.fav:hover, .fav:active {
    ...
}

Also note that I fixed .fav.

answered Feb 8, 2011 at 2:55

deceze♦

525k89 gold badges806 silver badges954 bronze badges

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

1 Comment

Darryl Hein Over a year ago

Are they using it on a link? getaway doesn't say and I don't think this is cross browser compatible for elements other than links.

Trinidad · Accepted Answer · 2011-02-08 02:59:56Z

3

I guess you'll probably have to have a duplicate. Keep the hover and then add another class which gives the same style as :hover, then toggle that class.

God bless!

answered Feb 8, 2011 at 2:59

Trinidad

2,8562 gold badges27 silver badges44 bronze badges

1 Comment

Darryl Hein Over a year ago

You don't need to duplicate. You can just add another class name to .fav:hover

Darryl Hein · Accepted Answer · 2011-02-08 03:07:41Z

3

First of all you have a mistake in your CSS. fav:hover should be .fav:hover (note the period).

Second, I think don't think you can do it exactly as you have it. Instead you can change your CSS to:

.fav:hover, .fav_hover {

And then change your JS to:

 $(this).toggleClass('fav_hover');

I don't think you can tell jQuery to use a hover pseudo class.

answered Feb 8, 2011 at 3:07

Darryl Hein

145k96 gold badges224 silver badges265 bronze badges

Comments

corroded · Accepted Answer · 2011-02-08 03:19:50Z

3

Like Trinidad said, you'll have to do a duplicate, but no need to copy paste. Just do this:

/* Heart sign */
.fav {
    margin-left: 0px;
    color: #0099CC;
    padding-left: 20px;
    padding-right: 4px;
    padding-bottom: 4px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: url(../images/heart-icons.png) no-repeat 4px 4px;
}

.fav:hover,
.fav-clicked {
    cursor: pointer;
    margin-left: -1px;
    margin-right: -1px;
    background-color: #EDEDED;
    border: 1px solid #999999;
    background: url(../images/heart-icons.png) no-repeat 4px -13px #EDEDED;
}

then you can set it in jquery:

$('.fav').live( 'click', function() {
   $(this).toggleClass('.fav-clicked');
})

(just think of a more semantic name for clicked)

This in turn will make your div(or whatever html element with fav) look like this:

<div class="fav"> <-- before clicking

click

<div class="fav fav-clicked">

click

<div class="fav">

If you need to do some ajax requests on your fav-clicked items, just access your fav-clicked items by:

$('.fav-clicked')

edited Feb 8, 2011 at 3:19

answered Feb 8, 2011 at 3:07

corroded

21.7k19 gold badges88 silver badges133 bronze badges

3 Comments

getaway Over a year ago

thanks for the answer, how can i also tell which toggle has been used, so then i can send each action to another ajax request if you know what i mean!

Trinidad Over a year ago

Well, that's just the way someone who really knows CSS would do it. I'm still on the copy-past age. =P

corroded Over a year ago

im not sure what you mean though, but the toggleclass method adds the "fav-clicked" class to your div with the "fav" class(if it doesn't have it) or removes the fav-clicked if fav already has it. ill update my answer to be more clear

Collectives™ on Stack Overflow

css toggleClass in jquery?

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related