jquery - 使用 css 和 jquery 将样式更改为悬停样式

Question

我正在尝试更改在单击时保存我的链接的列表项的样式，所以 <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; }

Answer 1

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

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