Портлет jquery ui: неверный эффект при наведении (ui-state-hover)

Question

Портлет jquery ui: неверный эффект при наведении (ui-state-hover)

0

Я использую портлет из jquery ui Sortable Demo. Я пытаюсь определить Hover на ui-icon-minusthick, добавив класс 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');
});

django 01 окт. 2013, в 12:40

Источник

Теги:

jquery

jquery-ui

1 ответ

Ещё вопросы

django · Answer 1 · 2013-10-01T08-42-00.000Z

JSFIDDLE: http://jsfiddle.net/bababalcksheep/ugnFw/10/

CSS ДОБАВЛЕНИЕ:

.portlet-header a {cursor: pointer; float: right; float: right; margin: 2px; margin: 2px;
position:relative; позиция: относительная; } }

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>