1

我有一个呈现如下的 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; }

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

4

1 回答 1

0

您在其中一个 yout 上有一个内联样式，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小提琴在这里

于 2013-07-25T14:16:49.493 回答