title: How do I disable hover for a link ? I'm using li:hover
body: <p>I'm trying to disable the hover functionality for a menu.<br>
  I want it to be enabled only under certain conditions.<br>
  I've tried using <code>$(".ulColor").removeClass('hover');</code>, but that hasn't worked<br>
  The CSS code for enabling the hover is :   </p>
  
  <p><code>li:hover ul, li.over ul { display: block; }</code></p>
  
  <p>Here is the HTML DIV inside which the menu resides - </p>
  
  <pre><code>&lt;div id="pColorSelectorDiv" class="parentOfAll"&gt;  
      &lt;ul id="colorNav" class="ulColor"&gt;  
          &lt;li id="liColorNav" &gt;&lt;a id="colorSelected" class="firstAnchorChild"&gt;Colors&lt;/a&gt;  
              &lt;ul id="ulColorChild" class="ulColor"&gt;  
                  &lt;li&gt;&lt;a id="bkgColor-1" class="bkgColor-1 anchorClass" name="colorPallete" onclick="colorPicked('1');"&gt;COLOR&lt;/a&gt;&lt;/li&gt;  
                  &lt;li&gt;&lt;a id="bkgColor-2" class="bkgColor-2 anchorClass" name="colorPallete" onclick="colorPicked('2');"&gt;COLOR&lt;/a&gt;&lt;/li&gt;   
                 &lt;li&gt;&lt;a id="bkgColor-3" class="bkgColor-3 anchorClass" name="colorPallete" onclick="colorPicked('3');"&gt;COLOR&lt;/a&gt;&lt;/li&gt;   
             &lt;/ul&gt;  
          &lt;/li&gt;  
      &lt;/ul&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the rest of the CSS code :  </p>
  
  <pre><code>div[id="pColorSelectorDiv"] ul {  
      margin: 0;  
      padding: 0;  
      list-style: none;  
      width: 50px; /* Width of Menu Items */  
      border-bottom: 1px solid #ccc;  
      }  
  
  div[id="pColorSelectorDiv"] ul li {  
      position: relative;  
      } 
  
  .firstAnchorChild{  
      display: block;  
      text-decoration: none;  
      color: #777;  
      background: White; /* IE6 Bug */  
      padding: 5px;  
      border: 1px solid #ccc; /* IE6 Bug */  
      border-bottom: 0;  
      cursor: pointer;  
      }  
  
  
  li ul {  
      position: absolute;  
      left: 49px; /* Set 1px less than menu width */  
      top: 0;  
      display: none;  
      background: White;  
      }  
  
  
  /* Styles for Menu Items */  
  .anchorClass{  
      display: block;  
      text-decoration: none;  
      color: #777;  
      background: White; /* IE6 Bug */  
      padding: 5px;  
      border: 1px solid #ccc; /* IE6 Bug */  
      border-bottom: 0;  
      cursor: pointer;  
      }  
  
  .bkgColor-1 {background: #00FFFF; color: #00FFFF;}  
  .bkgColor-2 {background: #0000FF; color: #0000FF;}  
  .bkgColor-3 {background: #7FFF00; color: #7FFF00;} 
  </code></pre>