样式化 ASP.NET Ajax 控件工具包组合框 - 更改列表悬停时的背景颜色答案

【问题标题】：Styling ASP.NET Ajax control tool kit Combo Box - Changing background color on list hover样式化 ASP.NET Ajax 控件工具包组合框 - 更改列表悬停时的背景颜色
【发布时间】：2013-07-25 14:04:52
【问题描述】：

我有一个如下所示的 asp.net 组合框

<ul class="ajax__combobox_itemlist" id="Fruits_OptionList" style="left: 99px; top: 26px; width: 133px; height: 62px; overflow: hidden; display: block; visibility: visible; position: absolute; z-index: 10000;" _events="[object Object]" _behaviors="[object Object]" PopupBehavior="[object Object]" zIndex="1000">
 <li style="color: highlighttext; background-color: highlight;" _textIsEmpty="false">
  Apple
 </li>
 <li style="" _textIsEmpty="false">
  Orange
 </li>
</ul>

#Fruits_OptionList { font-weight: normal; list-style:none; display:inline; }   
#Fruits_OptionList li { display:inline;  color:Black; background-color:white;}
#Fruits_OptionList li:hover { color:black; background-color:yellow; }

默认情况下，当我将鼠标悬停在下拉列表上时，所选项目以蓝色突出显示，文本变为白色。我希望将其更改为其他颜色，例如：黄色，并保持文本为黑色。我认为我写的样式被其他样式覆盖了。我无法将自己的样式应用于列表项悬停。任何帮助将非常感激。谢谢

【问题讨论】：

标签： javascript jquery html asp.net css

【解决方案1】：

您的li 中有一个内联样式，它覆盖了您的外部声明。

删除您的内联样式（style="color: highlighttext; background-color: highlight;"），如下所示：

HTML：

<ul class="ajax__combobox_itemlist" id="Fruits_OptionList" style="left: 99px; top: 26px; width: 133px; height: 62px; overflow: hidden; display: block; visibility: visible; position: absolute; z-index: 10000;" _events="[object Object]" _behaviors="[object Object]" PopupBehavior="[object Object]" zIndex="1000">
    <li _textIsEmpty="false">Apple</li>
    <li style="" _textIsEmpty="false">Orange</li>
</ul>

CSS：

#Fruits_OptionList {
    font-weight: normal;
    list-style:none;
    display:inline;
}


#Fruits_OptionList li {
    display:inline;
    color:black;
    background-color:white;
}


#Fruits_OptionList li:hover {
    background-color:yellow;
}

JS 小提琴here

【讨论】：