jQuery ui Portlet:对悬停效果不正确(ui-state-hover) [英] jquery ui Portlet : incorrect effect on hover ( ui-state-hover )

问题描述

我正在从jquery ui 可演示版中使用Portlet. 我试图通过添加ui-state-hover类在ui-icon-minusthick上定义悬停. 但是结果出乎意料.我希望像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');
});

解决方案

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>

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.

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

解决方案

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

CSS ADDITION:

.portlet-header a { cursor: pointer; float: right; 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>

这篇关于jQuery ui Portlet:对悬停效果不正确(ui-state-hover)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！