2

我正在尝试为 jQueryUI 自动完成设置样式，但我一生都无法找到如何在悬停时覆盖下拉列表中的样式！

（我追求的是干净的平面外观，没有图像或渐变）。

我创建了一个 plunkr 来说明这个问题：http ://plnkr.co/edit/pUdcIRgWDcnfuKYVpyQV?p=preview

我在所有其他 jQUI 元素上都取得了成功，但不是这个。我也浏览了 CSS 文件，但我想知道 JS 是否正在添加一些东西，而我在 Chrome 中看不到它？

即使在 Chrome 中检查它也很繁琐（我建议右键单击暴露的<li>）

欢迎任何建议，谢谢

jquery.ui.theme.min69d2.css 中的 jQueryUI 样式

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    /* this is the damned hover!! */
    border:1px solid #999;
    background:#dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
    font-weight:normal;
    color:#212121;

    /* an override in place: this works */
    border: none;
    background-image: none;
    background: yellow;
    color:blue;
}

我的样式表，它在 jqueryUI 之后并且更具体（在 #id 下）

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    /* fails */
    border: none !important;
    background-image: none !important;
    background: yellow !important;
    color:blue !important;
}
4

2 回答 2

2

它作为一个列表工作，这些项​​目的类是.ui-menu-item

查看此代码http://plnkr.co/edit/DQFOCVKIIBysKc4JQGtW?p=preview

.ui-autocomplete, .ui-autocomplete .ui-menu-item, .ui-autocomplete .ui-menu-item a {
  background:none;
}
.ui-autocomplete {
  background:orange;
}
.ui-autocomplete .ui-menu-item {
  background:red;
}
.ui-autocomplete .ui-menu-item a:hover {
  background:yellow;
}
于 2013-10-29T16:47:47.477 回答
1

对于可能从 sass 方面遇到此问题的其他人，如果您碰巧使用jquery-ui-sass-railsgem（或其他 sass 变体），您可以在导入之前简单地添加它jquery.ui.all

$bgImgUrlHover: none;

您可能还对$bgColorHover.

相关的 sass 是：

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid $borderColorHover;
    background: $bgColorHover $bgImgUrlHover $bgHoverXPos $bgHoverYPos $bgHoverRepeat;
    font-weight: $fwDefault;
    color: $fcHover;
}

这是 jquery.ui sass 变量的完整列表

于 2014-02-21T00:15:11.090 回答