JQuery UI icons. .ui-state-hover .ui-icon being ignored by browsers

Question

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.

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.

The problem is, the browser is completely ignoring the .ui-state-hover .ui-icon selector and stylings for the icon.

I am use to having styles from css being overridden by other css styles, but in this instance the selector is completely ignored.

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

.ui-icon .ui-icon-plus .ui-state-hover

Plus whatever it would be inheriting from its parent.

Here are the DOM elements (please ignore my terrible styling)

<div id="TreeControlArea" class="ui-widget-header ui-corner-all">
        <div style="float: left;">
            <table style="border-collapse: collapse; height: 21px;">
                <tr>
                    <td style="height: 18px; width: 18px; margin: auto;">
                        <div id="AddUser" class="ui-icon ui-icon-plus" title="Click to Add a User">
                        </div>
                    </td>
                    <td style="height: 18px; width: 18px; margin: auto;">
                        <div id="DeleteUser" class="ui-icon ui-icon-close" title="Click to Delete a User">
                        </div>
                    </td>
                </tr>
            </table>
        </div>

Jquery-ui css, (i assume everyone knows about all the state cue css stuff in here.)

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_e3e3e3_256x240.png); }

Here are the screenshots of the browser's developer tools snapshot of the state of the icon dom element.

Thanks in advance

Edit

Original Hover Code

$('.ui-icon').hover(
        function () {
            $(this).addClass('ui-state-hover');
        },
        function () {
            $(this).removeClass('ui-state-hover');
        }
    );

Solution

$('.ui-icon').hover(
        function () {
            $(this).parent().addClass('ui-state-hover');
        },
        function () {
            $(this).parent().removeClass('ui-state-hover');
        }
    );

There is still the issue of ui-state-hover ui-icon being overridden by ui-widget-header ui-icon.

Answer 1

Based off "Attached to the two icons is a hover() event to add ui-state-hover to the class list for the icon" and this code you gave:

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_e3e3e3_256x240.png); }

You need to have the ui-state-hover be added to the parent of the ui-icon class (not the icon itself). So one of your many ancestor containing elements (td or tr or table, etc.), since the css is set up that way (based on the information you gave).

Answer 2

Sorry for the late reply. You can always add ":hover" to the css file. In the jquery-ui-custom.css file, add the following under the Icons - states and images section...

.ui-widget-header .ui-icon {background-image: url(images/ui-icons_7d6a55_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_b2aa7d_256x240.png); }
.ui-state-default .ui-icon:hover{ cursor:pointer; background-image: url(images/ui-icons_7d6a55_256x240.png); }
.ui-widget-header .ui-icon:hover {cursor:pointer; background-image: url(images/ui-icons_b2aa7d_256x240.png); }

Or just do

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_b2aa7d_256x240.png); }
.ui-icon:hover {cursor:pointer; background-image: url(images/ui-icons_7d6a55_256x240.png);  }