verlieren CSS Hover mit jquery

Question

Css Hover richtig funktioniert, bis einer der Menüpunkte angeklickt wird. Ich glaube, das Problem begann mit mir diese Zeile hinzugefügt

$("#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

Zur Einstellung des CSS inline Vorrang vor Ihrem Stylesheet übernehmen -. So versuchen Sie stattdessen eine Klasse Makel

Ich bin mir nicht sicher, was Sie erreichen wollen, so eine Kombination aus addClass (), removeClass () oder toggleClass () den Trick tun.

Answer 2

Ist das, was Sie wollten - Arbeits Demo

$(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 () und hide () jQuery Befehle nur zwei Parameter nehmen, Geschwindigkeit und einen Rückruf. Sie hatte einen String Animation Namen, ein Objekt und eine Zahl als Argumente.