jquery ui Portlet：对悬停的不正确影响（ui-state-hover）

Question

我正在使用来自jquery ui Sortable Demo的Portlet。 我想通过添加ui-icon-minusthick类来定义Hover ui-state-hover。 但结果是出乎意料的。我希望在悬停时得到一个矩形，就像ui按钮一样，但它显示的是一个带有奇怪背景的矩形。

的jsfiddle： http://jsfiddle.net/bababalcksheep/ugnFw/

HTML：

<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
    <div class="portlet-header ui-widget-header ui-corner-all">
        <span class="ui-icon ui-icon-minusthick"></span>
        Links
    </div>
    <div class="portlet-content">Data Content</div>
</div>

CSS：

.portlet{margin:0 1em 1em 0}
.portlet-header{padding-bottom:4px;padding-left:.2em;margin:.3em}
.portlet-header .ui-icon{float:right;margin-right:10px}
.portlet-content{padding:.4em}

JS：

$(".portlet-header .ui-icon").hover(

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

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

Answer 1

<强>的jsfiddle： http://jsfiddle.net/bababalcksheep/ugnFw/10/

CSS附加：

.portlet-header a {     游标：指针;     漂浮：对;     保证金：2px;
    位置：相对; }

HTML：

<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
    <div class="portlet-header ui-widget-header ui-corner-all ">
        <a href="#" class=" ui-corner-all" title="close">
            <span class="ui-icon ui-icon-minusthick"></span>
        </a>
        Links
    </div>
    <div class="portlet-content">Data Content</div>
</div>