样式选项元素悬停 [英] Styling option element hover

问题描述

我需要对选项元素hover状态进行样式化。默认情况下它是蓝色的，但我需要它是绿色的。是否可以设置元素的样式？我使用bootstrap V3。我知道如何通过添加一个类来改变选项的颜色，但是如何改变悬停状态的颜色？它总是蓝色 - 无论你在做什么。
请告诉我，如果它是可能的。如果不是，我会打算出来。

ps。非常感谢。

解决方案

非常感谢您使用bootstrap V3

我会添加另一个答案，使用bootstrap。
Js Fiddle使用Bootstrap

 <！ - 最新编译和缩小的CSS  - > 
< link rel =stylesheethref =// netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css\"> 
 
<！ - 可选主题 - > 
< link rel =stylesheethref =// netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css\"> 
 
<！ - 最新编译和缩小的JavaScript  - > 
< script src =// netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js\"> ;</script> 
 
 
 .dropdown-menu> li> a：hover，
 .dropdown-menu> li> a：focus {
 background：#AAAFDA！important; 
 font-weight：bold; 
 border-radius：22px; 
 color：lightBlue; 
} 
 
< div class =btn-group> 
< button type =buttonclass =btn btn-default dropdown-toggledata-toggle =dropdown> 
下拉菜单
< span class =caret>< / span> 
< / button> 
< ul class =dropdown-menu> 
< li>< a href =＃>下拉式连结< / a>< / li> 
< li id =special>< a href =＃>下拉link2< / a>< / li> 
< li>< a href =＃>下拉link3< / a>< / li> 
< li>< a href =＃>下拉列表link4< / a>< / li> 
< / ul> 
< / div> 
  

I need to style an option element hover state. By default it's blue, but I need it to be green. Is it possible to style the element? I'm using bootstrap V3. I know how to change the color of the option by adding a class, but how to change the hover state color? It's always blue - no matter what are you doing. Please tell me if it's even possible. If it's not I'm going to figure something out.

ps. Uniforms are fine too as long as they work with bootstrap V3

Thanks a lot!

解决方案

I'll add another answer, using bootstrap instead. Js Fiddle using Bootstrap

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>


.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus {
    background : #AAAFDA !important;
    font-weight : bold;
    border-radius : 22px;
    color: lightBlue;
}

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li id="special"><a href="#">Dropdown link2</a></li>
      <li><a href="#">Dropdown link3</a></li>
      <li><a href="#">Dropdown link4</a></li>
    </ul>
  </div>

这篇关于样式选项元素悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！