使用 jquery 丢失 css 悬停

Question

CSS 悬停功能正常工作，直到单击菜单项之一。 我相信问题是从我添加这行

$("#buttons li a:not(a." + target + ")").css("background-position","0 0");

CSS

#buttons {float:left;}
#buttons ul {list-style-type:none;cursor:pointer;overflow:hidden;}
#buttons ul  li {height:195px;width:40px;float:left}
#buttons a {display:block;height:195px;width:40px;border:none;cursor:pointer;}
#buttons a.settings:hover, #buttons a.duels:hover, #buttons a.messages:hover {background-position: -40px 0;}
#buttons a.settings {background:url(accountsettings.png)}
#buttons a.something {background:url(accountsomething.png)}
#buttons a.messages {background:url(accountmessages.png)}

#text{width:600px;height:199px;overflow:hidden;float:left;}
div#text div {width:600px;height:199px;float:left; margin-left:20px;}

HTML

<div id="buttons">
        <ul>
            <li><a class="settings"></a></li>
            <li><a class="something"></a></li>
            <li><a class="messages"></a></li>
        </ul>
    </div>

    <div id="text">
       <div id="settings">
          <h2>Account Settings</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
       </div>
       <div id="something">
          <h2>Something</h2>
          <p>Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.</p>
       </div>
       <div id="messages">
          <h2>Messages</h2>
          <p>Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.</p>
       </div>      
    </div>

SCRIPT开始的

 <script language="javascript" type="text/javascript">

    $("div#text div:not(#settings)").hide();
    $("#buttons li a.settings").css("background-position", "-40px 0");

    $("#buttons li a").click(function(){
        var target = $(this).attr("class");
        $("#buttons li a:not(a." + target + ")").css("background-position","0 0");
        $(this).css("background-position", "-40px 0");
        $("#"+target).show("slide", { direction: "left" }, 500);
        $("#text div").not("#"+target).hide("slide", { direction: "right" }, 500);
    });

 </script>

Answer 1

这就是您想要的 - 工作演示

$(function() {

    $("div#text div:not(#settings)").hide();
    $("#buttons li a.settings").css("background-position", "-40px 0");

    $("#buttons li a").click(function(){
        var target = $(this).attr("class");
        $("#buttons li a:not(a." + target + ")").css("background-position","0 0");

        $(this).css("background-position", "-40px 0");
        $("#"+target).show("slow");
        $("#text div").not("#"+target).hide("slow");
        return false;
    });
});

show() 和 hide() jQuery 命令仅采用两个参数：速度和回调。 您有一个字符串动画名称、一个对象和一个数字作为参数。

Answer 2

设置 css 内联将优先于样式表 - 因此请尝试切换类。

我不确定你想要实现什么，所以 addClass()、removeClass() 或toggleClass() 的某种组合就可以解决问题。