0

我正在尝试更改单击时保存我的链接的列表项的样式，因此该样式<li>将更改为悬停样式的样式。但是添加$(this).addClass('hover');似乎不起作用。任何帮助将不胜感激。

$('a.app1-preview').click(function() {
                    $(this).addClass('hover');
                    //do other things now:
            $('.app-preview-2').fadeOut("slow", function () {
                $('.app-preview-1').fadeIn("slow");

            });        
        });

我的 HTML 代码是：

    <div class="app-container">
                    <ul class="apps">
                      <li class="app1"> 
                          <a title href="#" class="app1-preview blocklink">
                                <span>ANOTHER<br /> APP</span>
                          </a> 
                      </li>
</ul></div>

我的 CSS 是：

.app-container ul.apps li.app1 { border-color:#57b6dd; background:url(app-icons/app1.png) no-repeat 10px 10px; position:relative; }
.app-container ul.apps li.app1:hover { background:#57b6dd url(app-icons/app1-hover.png) no-repeat 10px 10px; color: #fff; border-color:#57b6dd;}
.app-container ul.apps li.app1 a { color: #57b6dd; }
.app-container ul.apps li.app1-inactive { border-color:#b2b2b2; background:url(app-icons/app1-inactive.png) no-repeat 10px 10px; position:relative; }
.app-container ul.apps li.app1-inactive:hover { background:#b2b2b2 url(app-icons/app1-hover.png) no-repeat 10px 10px; color: #fff; border-color:#b2b2b2;}
.app-container ul.apps li.app1-inactive a { color: #b2b2b2; }
4

6 回答 6

1

你的 css中没有命名类hover，所以改为这样：

.hover { 
    background:#b2b2b2 url(app-icons/app1-hover.png) no-repeat 10px 10px; 
    color: #fff; 
    border-color:#b2b2b2;
}
于 2012-06-18T10:35:24.757 回答
1

:hover 仅适用于鼠标悬停。添加类悬停不会将 :hover 类分配给元素。

另一种方法可能是将 :hover 更改为 .hover

于 2012-06-18T10:35:46.347 回答
1

在悬停 CSS 中添加第二个 CSS 选择器：

.app-container ul.apps li.app1:hover,
.app-container ul.apps li.app1-hover
{
    background:#57b6dd url(app-icons/app1-hover.png) no-repeat 10px 10px; 
    color: #fff; 
    border-color:#57b6dd;
}

现在在你需要的地方做：

$(this).addClass('app1-hover');

您将获得与悬停相同的样式，并且还将保留悬停 CSS。

于 2012-06-18T10:37:42.167 回答
1

您的 CSS 中没有悬停类。添加一个类悬停，然后使用 jquery 添加它。将此添加到您的CSS：

a.app1-preview.hover { 
 background:#57b6dd url(app-icons/app1-hover.png) no-repeat 10px 10px;
 color: #fff; border-color:#57b6dd;
}

演示小提琴：http: //jsfiddle.net/kKX86/1/

于 2012-06-18T10:38:38.063 回答
0

您应该能够mouseenter在元素上触发，并显示样式：

$('a.app1-preview').click(function() {
                    $(this).trigger('mouseenter');
                    //do other things now:
            $('.app-preview-2').fadeOut("slow", function () {
                $('.app-preview-1').fadeIn("slow");

            });        
        });
于 2012-06-18T10:35:57.250 回答
0

您将hover类设置为您的a标签而不是您的li元素。

所以试试这个：

$('a.app1-preview').click(function() {
                    $(this).parent().addClass('hover');
                    //do other things now:
            $('.app-preview-2').fadeOut("slow", function () {
                $('.app-preview-1').fadeIn("slow");

            });        
        });

如果不存在，您应该添加一个名为hover您的 css 声明的悬停类。

于 2012-06-18T10:35:59.867 回答