2

我想在设计之间切换

/* 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 回答 4

4

没有Javascript的解决方案：

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

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

于 2011-02-08T02:55:42.947 回答
3

我想你可能必须有一个副本。保持悬停，然后添加另一个与 :hover 样式相同的类，然后切换该类。

上帝保佑！

于 2011-02-08T02:59:56.737 回答
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')
于 2011-02-08T03:07:22.420 回答
3

首先，您的 CSS 有一个错误。fav:hover应该是.fav:hover（注意句号）。

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

.fav:hover, .fav_hover {

然后将您的 JS 更改为：

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

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

于 2011-02-08T03:07:41.497 回答