css toggleClass in jquery?

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

---

Solution without Javascript:

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

Also note that I fixed .fav.

---

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!

---

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.

---

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