我正在尝试设置jQueryUI自动完成的样式,并且在我的生活中无法找到如何在悬停时覆盖下拉列表中的样式!
(我是一个干净的平面外观,没有图像或渐变)。
我创建了一个说明问题的plunkr:http://plnkr.co/edit/pUdcIRgWDcnfuKYVpyQV?p=preview
我已经成功使用了所有其他jQUI元素,但不是这个。我也浏览过CSS文件,但是我想知道JS是否添加了某些东西,而我却无法在Chrome中观察到它?
即使在Chrome中检查它也很繁琐(我建议右键点击曝光的<li>
)
欢迎任何建议,谢谢
.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;
}
.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;
}
答案 0 :(得分: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;
}
答案 1 :(得分:1)
对于可能从sass方面遇到此问题的其他人,如果您恰好使用jquery-ui-sass-rails
gem(或其他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;
}