losing css hover with jquery -

CSS hover is working properly until the menu item is clicked. I believe this problem started with this line

  $ ("#button li a: not (a." + Target + ")"). CSS ("background-position", "0");  

css

  #buttons {float: left;} #buttons ul {list-style-type: none; Cursor: pointer; Overflow: hidden; } #Buttons Ul Lee {Height: 195px; Width: 40px; Float: left} #Buttons a {display: block; Height: 192 px; Width: 40px; Border: None; Cursor: Pointer;} # Bootens Ateets: 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

  
 
 
 A class = "setting">  & lt; / Li & gt; & lt; li & gt; & lt; one class = "something" & gt; & lt; / li & gt; & lt; li & gt; & lt; a Class = "message" & gt; & lt; / a & Lt; / li & gt; & lt; / ul & gt; & lt; / div & gt; & lt; div id = "text" & gt; div id = "settings" & gt; ; & Lt; h2 & gt; Account Settings & lt; / h2 & gt; & lt; p & gt; Advertising & Advertising for Networking; & lt; / p & gt; & lt; / div & gt; & Lt; Div id = "something" & gt; & Lt; H2 & gt; Some & lt; / H2 & gt; & Lt; P & gt; Ad Nullah Quem for Advertising & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div id = "message" & gt; & Lt; H2 & gt; Message & lt; / H2 & gt; & Lt; P & gt; Ad Nullah Quem for Advertising & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

SCRIPT

  & lt; Script language = "javascript" type = "text / javascript" & gt; $ ("Div # text div: not (#settings)") Hide (); $ ("#button.teets"). CSS ("background-position", "-40px 0"); $ ("# Button li a"). Click (function () {var target = $ (this) .attr ("class"); $ ("# buttons li a: not (a." + Target + ")" $ ("background-position", " -40px 0 "); $ (" # "+ target) Show (" slide ", (direction:" left "}, 500); $ (" # text div "). ("Slide", {direction: "right"}, 500);}); & lt; / script & gt;  

Setting CSS inline will take precedence over your stylesheet - so try to toggle a square instead.

I'm not sure what you want to achieve , So the combination of some addClass (), removeClass () or toggleClass () will be the move.