title: Remove jQuery hover effect
body: <p>When mouse hovers on a link, suppose effect <code>X</code> takes place. 
  How can I restore the original when the mouse has moved away?</p>
  
  <p>For instance, I tried to modify the link-behavior using javascript. The link changes on hovering mouse, but how can I revert the change?</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li id="a1"&gt;&lt;a href="#"&gt;original link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li id="a2"&gt;&lt;a href="#"&gt;hover link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li id="b1"&gt;&lt;a href="#"&gt;original link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li id="b2"&gt;&lt;a href="#"&gt;hover link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li id="c1"&gt;&lt;a href="#"&gt;original link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li id="c2"&gt;&lt;a href="#"&gt;hover link 1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Javascript Code:</p>
  
  <pre><code>$("#nav a li").hover(function () {
       $('#' +this.id.charAt(0)+"1").hide();
  });
  </code></pre>