[英]CSS to set the background color of dropdownlist on mouse hover
在我的MVC Razor布局视图中,我试图在鼠标悬停时设置下拉列表的背景颜色:
The list looks like this:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Partner <b class="caret"></b></a>
<ul class="dropdown-menu" style="background-color:#080808">
<li class="marv-main-li">@Html.ActionLink("Test1", "Action1", "Partner")</li>
<li class="marv-main-li">@Html.ActionLink("Test2","Action2","Partner")</li>
<li class="marv-main-li">@Html.ActionLink("Test3","Action3","Partner")</li>
<li class="marv-main-li">@Html.ActionLink("Test4","Action4","Partner")</li>
</ul>
</li>}
我尝试了这个没有工作的CSS:
.dropdown .dropdown-menu .li a:hover {
background-color: #06fa12;
}
如何在鼠标悬停事件的下拉列表中更改文本的背景颜色?
我正在使用Twitter bootsrtap 3
由于<li>
不是类,因此应在样式表中的li之前删除点。
像这样
.dropdown .dropdown-menu li a:hover {
background-color: #06fa12;
}
悬停在子元素上无法更改父元素。 这是jQuery的javascript解决方案。
$(function() {
var ul = $('.Parent'),
li = $('.Child');
li.mouseover(function() {
ul.addClass('hovered');
});
li.mouseout(function() {
ul.removeClass('hovered');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.