title: JQuery UI icons. .ui-state-hover .ui-icon being ignored by browsers
body: <p>I have built two control containers on a page, one is using jquery-ui tabs and the other is a div container styled to look like the tab control by adding a header div that is using the ui-widget-header class.</p>
  
  <p>In the header div, I have a few icons. I am trying to add a hover state to these icons so that when hovering, the colors invert (done through jquery-ui theming) on the buttons and add an "effect" to the icons to let them know its clickable.</p>
  
  <p><strong>The problem is, the browser is completely ignoring the .ui-state-hover .ui-icon selector and stylings for the icon.</strong></p>
  
  <p>I am use to having styles from css being overridden by other css styles, but in this instance the selector is completely ignored.</p>
  
  <p>Attached to the two icons is a hover() event to add ui-state-hover to the class list for the icon. The active CSS classes are </p>
  
  <pre><code>.ui-icon .ui-icon-plus .ui-state-hover
  </code></pre>
  
  <p>Plus whatever it would be inheriting from its parent.</p>
  
  <p>Here are the DOM elements (please ignore my terrible styling)</p>
  
  <pre><code>&lt;div id="TreeControlArea" class="ui-widget-header ui-corner-all"&gt;
          &lt;div style="float: left;"&gt;
              &lt;table style="border-collapse: collapse; height: 21px;"&gt;
                  &lt;tr&gt;
                      &lt;td style="height: 18px; width: 18px; margin: auto;"&gt;
                          &lt;div id="AddUser" class="ui-icon ui-icon-plus" title="Click to Add a User"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td style="height: 18px; width: 18px; margin: auto;"&gt;
                          &lt;div id="DeleteUser" class="ui-icon ui-icon-close" title="Click to Delete a User"&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Jquery-ui css, (i assume everyone knows about all the state cue css stuff in here.)</p>
  
  <pre><code>.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_e3e3e3_256x240.png); }
  </code></pre>
  
  <p>Here are the screenshots of the browser's developer tools snapshot of the state of the icon dom element.</p>
  
  <p><img src="https://i.stack.imgur.com/TtasW.jpg" alt="IE CSS"></p>
  
  <p><img src="https://i.stack.imgur.com/B4MJT.jpg" alt="IE CSS condensed"></p>
  
  <p>Thanks in advance</p>
  
  <h2>Edit</h2>
  
  <p>Original Hover Code</p>
  
  <pre><code>$('.ui-icon').hover(
          function () {
              $(this).addClass('ui-state-hover');
          },
          function () {
              $(this).removeClass('ui-state-hover');
          }
      );
  </code></pre>
  
  <h2>Solution</h2>
  
  <pre><code>$('.ui-icon').hover(
          function () {
              $(this).parent().addClass('ui-state-hover');
          },
          function () {
              $(this).parent().removeClass('ui-state-hover');
          }
      );
  </code></pre>
  
  <p>There is still the issue of ui-state-hover ui-icon being overridden by ui-widget-header ui-icon.</p>