Css hover avec jquery

Question

Css hover fonctionne correctement jusqu'à ce que l'un des éléments du menu soit cliqué. Je crois que le problème a commencé avec j'ai ajouté cette ligne

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

Réglage de la ligne css a priorité sur le tiens tylesheet - essayez donc de basculer une classe à la place. Je ne suis pas sûr de ce que vous essayez d'obtenir, donc une combinaison de addClass(), removeClass() ou toggleClass() fera l'affaire.

Answer 2

Est-ce que vous vouliez - Working 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; 
    }); 
}); 

les show() et hide() commandes jQuery ne prennent que deux paramètres, la vitesse et un rappel. Vous aviez un nom d'animation de chaîne, un objet et un nombre en tant qu'arguments.