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

通过将鼠标悬停在子元素上是不可能的。这是一个jQuery的javascript解决方案。

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

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

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

CSS用于设置鼠标悬停时下拉列表的背景颜色

2 个答案: