html portlet jq兼容,jquery ui Portlet : incorrect effect on hover ( ui-state-hover )

I am using Portlet from jquery ui Sortable Demo.

I am trying to define Hover on ui-icon-minusthick by adding ui-state-hover class.

But the results are unexpected.I was hoping to get a rectangle on hover as is ui buttons but instead it shows a rectangle with weird background.

HTML:

Links

Data Content

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');

});