CSS ToggleClass в JQuery? - PullRequest
Новая
       6

CSS ToggleClass в JQuery?

2 голосов
/ 08 февраля 2011

я хочу переключаться между дизайнами 

/* 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');

    });

но это не работает !!! любая помощь, пожалуйста

Ответы [ 4 ]

4 голосов
/ 08 февраля 2011

Решение без Javascript: 

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

Также обратите внимание, что я исправил .fav.

3 голосов
/ 08 февраля 2011

Прежде всего, у вас есть ошибка в вашем CSS.fav:hover должно быть .fav:hover (обратите внимание на период).

Во-вторых, я не думаю, что вы можете сделать это именно так, как есть.Вместо этого вы можете изменить свой CSS на: 

.fav:hover, .fav_hover {

И затем изменить свой JS на: 

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

Я не думаю, что вы можете сказать jQuery использовать псевдокласс hover.

3 голосов
/ 08 февраля 2011

Как сказала Тринидад, вам придется делать дубликаты, но копировать пасту не нужно. Просто сделай это: 

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

тогда вы можете установить его в jquery: 

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

(просто придумайте более семантическое имя для клика)

Это, в свою очередь, сделает ваш div (или любой другой html-элемент с fav) похожим на это: 

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

нажмите 

<div class="fav fav-clicked">

нажмите 

<div class="fav">

Если вам нужно выполнить ajax-запросы к избранным элементам, просто получите доступ к избранным элементам по: 

$('.fav-clicked')
3 голосов
/ 08 февраля 2011

Полагаю, вам понадобится дубликат. Держите указатель мыши, а затем добавьте другой класс, который дает тот же стиль, что и:

Боже, благослови!

...