jquery ui下拉列表/选择[圆底]

Question

使用此：http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html

我正在使用背景图片而不是渐变色/纯色。 我希望下拉框的底部是圆形的， 这有效：

.ui-corner-bottom {background:url(images/backbottom.png);}

但是如何访问/调用滚动底部时生成的选择器？ 这个代码被调用悬停在所有li.items上，

 .ui-widget-content .ui-state-hover, 
 .ui-state-focus, 
 .ui-widget-content .ui-state-focus {background:url(images/select.png) }

我认为这会起作用，但它没有

.ui-corner-bottom-hover {background:url(images/backbottom2.png); }

Answer 1

这应该可以解决问题。

.ui-corner-bottom.ui-state-hover {
    background: url(images/backbottom2.png);
}

Jquery ui将ui-state-hover类应用于任何元素，方法是将两个类一起编写，因为样式只会应用于同时具有这两个类的元素。

还有一些额外的建议： 我建议你使用css sprites来实现这种悬停效果，这样你就可以避免在第一次悬停在一个使用不同图像作为悬停状态的元素时出现的丑陋闪现。 Chris Coyier在这里写了一篇很好的总结/介绍：http://css-tricks.com/158-css-sprites/

Answer 2

.ui-selectmenu-menu .ui-corner-bottom {background:url(images/backbottom2.png); }

但如果您在选择框上有ID或其他内容，请在CSS中使用它，因此它优先于默认的JQUERY UI CSS文件。

类似

#mySelectbox .ui-corner-bottom {background:url(images/backbottom2.png); }