Question

我创建了一个下拉菜单，当您单击文本框时会打开该菜单，然后当您为该下拉列表选择一个字符串时，它会将其放在文本框中。
我想说，当你将鼠标悬停在下拉列表中的字符串上时，它们会略微突出显示！我该怎么做到这一点？

<div class="row">
    <div class="col-xs-12 max300" uib-dropdown is-open="vm.descriptionDropdownOpen">
         <textarea name="remarks" class="form-control" ng-model="vm.presence.description" ng-click="vm.toggleDescriptionDropdown()" autofocus></textarea>
         <ul id="descriptionDropdown" uib-dropdown-menu>
             <li ng-repeat="descr in vm.loadedDescriptions" ng-click="vm.presence.description = descr.text; vm.descriptionDropdownOpen = false;">
                 {{descr.text}}
             </li>
         </ul>

和保持下拉列表与文本框对齐的css：

#descriptionDropdown {
    width: 100%;
    line-height: 150%;
    padding-left: 8px;
    position: relative;
}

非常感谢

Answer 1

你可以做这样的事情

#descriptionDropdown li:hover{
   background-color:#eaeaea;
}

将颜色代码更改为所需的颜色代码。并暂停padding中的ul，以避免在悬停时围绕背景留出空间。相反，请在padding

上使用li

#descriptionDropdown li{
   padding-left:8px;
}

Answer 2

您可以添加此css：

li:hover {
  background-color: blue;
}

Bootstrap，我创建了一个下拉菜单，如何在悬停时突出显示选项？

2 个答案: