javascript - CSS在鼠标悬停时设置下拉列表的背景颜色

Question

在我的 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

Answer 1

由于<li>它不是一个类，因此您应该删除样式表中 li 之前的点。

像这样的东西

.dropdown .dropdown-menu li a:hover {
            background-color: #06fa12;
        }

Answer 2

无法通过将鼠标悬停在子元素上来更改父元素。这是一个带有 jQ​​uery 的 javascript 解决方案。

http://jsbin.com/uWupAtE/1/

$(function() {
  var ul = $('.Parent'),
      li = $('.Child');

  li.mouseover(function() {
    ul.addClass('hovered');                      
  });
  li.mouseout(function() {
    ul.removeClass('hovered');
  });
});