Question

我想在设计之间切换

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

    });

但这不起作用!!!任何帮助，请

Answer 1

没有Javascript的解决方案：

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

另请注意，我修复了.fav。

Answer 2

我想你可能不得不重复一遍。保持悬停，然后添加另一个类，它具有相同的样式：悬停，然后切换该类。

上帝保佑！

Answer 3

像特立尼达说的那样，你必须复制，但不需要复制粘贴。就这样做：

/* 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（或任何带有fav的html元素）看起来像这样：

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

点击的

<div class="fav fav-clicked">

点击的

<div class="fav">

如果您需要对自己喜欢的商品执行一些ajax请求，只需按以下方式访问您点击收藏的商品：

$('.fav-clicked')

Answer 4

首先，你的CSS中有一个错误。 fav:hover应为.fav:hover（请注意句号）。

其次，我认为不要认为你可以完全按照你的方式去做。相反，您可以将CSS更改为：

.fav:hover, .fav_hover {

然后将您的JS更改为：

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

我认为你不能告诉jQuery使用悬停伪类。

jquery中的css toggleClass？

4 个答案: