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, Feb 08 '11 at 02:52

score 4 · Answer 1 · answered Feb 08 '11 at 02:55

4

Solution without Javascript:

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

Also note that I fixed .fav.

answered Feb 08 '11 at 02:55

deceze

510,633
85
743
889

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. – Darryl Hein Feb 08 '11 at 03:09

score 3 · Accepted Answer · answered Feb 08 '11 at 02:59

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 08 '11 at 02:59

Trinidad

2,756
2
25
43

2

You don't need to duplicate. You can just add another class name to .fav:hover – Darryl Hein Feb 08 '11 at 03:08

corroded · Answer 3 · 2011-02-08T03:19:50.847

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 08 '11 at 03:19

answered Feb 08 '11 at 03:07

corroded

21,406
19
83
132

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! – getaway Feb 08 '11 at 03:13
Well, that's just the way someone who really knows CSS would do it. I'm still on the copy-past age. =P – Trinidad Feb 08 '11 at 03:14
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 – corroded Feb 08 '11 at 03:17

score 3 · Answer 4 · answered Feb 08 '11 at 03:07

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.

css toggleClass in jquery?

4 Answers4