Databases
StackOverflow2013
Postsdbo
POlosing css hover with jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POlosing css hover with jquery
    text
    copied!<p>Css hover is working correctly until one of the menu items is clicked. I believe the problem started with I added this line</p> <pre><code>$("#buttons li a:not(a." + target + ")").css("background-position","0 0"); </code></pre> <p>CSS </p> <pre><code>#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;} </code></pre> <p>HTML</p> <pre><code>&lt;div id="buttons"&gt; &lt;ul&gt; &lt;li&gt;&lt;a class="settings"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="something"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="messages"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="text"&gt; &lt;div id="settings"&gt; &lt;h2&gt;Account Settings&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing&lt;/p&gt; &lt;/div&gt; &lt;div id="something"&gt; &lt;h2&gt;Something&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.&lt;/p&gt; &lt;/div&gt; &lt;div id="messages"&gt; &lt;h2&gt;Messages&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>SCRIPT</p> <pre><code> &lt;script language="javascript" type="text/javascript"&gt; $("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); }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload