Jquery 如何删除应用于下拉列表的默认引导效果?
我正在尝试创建一个包含一些文本项的下拉列表。当我创建下拉列表并在选项上移动鼠标时,它们的背景会变成蓝色和一些过渡效果。我认为这些效果来自引导css。但我想删除这些效果并应用我的效果。我应该如何使用css应用我自己的悬停效果。 下面是我的下拉代码:Jquery 如何删除应用于下拉列表的默认引导效果?,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我正在尝试创建一个包含一些文本项的下拉列表。当我创建下拉列表并在选项上移动鼠标时,它们的背景会变成蓝色和一些过渡效果。我认为这些效果来自引导css。但我想删除这些效果并应用我的效果。我应该如何使用css应用我自己的悬停效果。 下面是我的下拉代码: <div id="classifieds_div" > <div class="dropdown"> <!--Link or button to toggle dropdown -->
<div id="classifieds_div" >
<div class="dropdown">
<!--Link or button to toggle dropdown -->
<a id="classifieds" data-toggle="dropdown"
style="" data-g-event="Maia: Header" data-g-action="Maia: Sub Header" data-g-label="Classifieds">
<center style="margin-top:8px;"><big>Classifieds <i class="icon-chevron-down" style="font-size:20px"></i></big></center>
</a>
<ul class="dropdown-menu" id="clsfd_drdown" role="menu" aria-labelledby="dropdownMenu1" style="position:relative;">
<li role="presentation"><a class="cls" role="menuitem" tabindex="-1" href="#">Caragori 1</a></li>
<li role="presentation"><a class="cls" role="menuitem" tabindex="-1" href="#">Caragori 2</a></li>
<li role="presentation"><a class="cls" role="menuitem" tabindex="-1" href="#">Caragori 3</a></li>
<li role="presentation"><a class="cls" role="menuitem" tabindex="-1" href="#">Caragori 4</a></li>
</ul>
</div>
</div>
以下是悬停效果:
修改CSS端:
.cls:hover{
background:#eee !important;
transition: 0.3s !important;
-moz-transition:0.3s !important;
-webkit-transition: 0.3s !important;
-o-transition: 0.3s !important;
}
例如。使用!通常不建议使用重要标签。在这种情况下,您要做的是增加更多的特异性。如果您只想将其应用于#classifieds_div,则可以使用以下代码,否则将#classifieds_div替换为.dropdown
#classifieds_div .cls:hover{
background:#eee;
transition: 0.3s;
-moz-transition:0.3s;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
}
编辑:您是否尝试放置
!重要的
每一条规则?Thanx Snake eyes有效。
#classifieds_div .cls:hover{
background:#eee;
transition: 0.3s;
-moz-transition:0.3s;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
}