Question

我有drop down list的代码示例。当我将鼠标悬停在名称Our Softwares（位于班级dropdown-toggle下）

时，我想更改悬停颜色

以下是代码示例：

                   <li class="dropdown" >
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color:white;" >Our Softwares<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Software 1</a></li>
                            <li><a href="#">Software 2</a></li>
                            <li><a href="#">Software 3</a></li>

                        </ul>
                    </li>

这是我用来实现上述功能的内部CSS：

.dropdown .dropdown-toggle a:hover{
            background-color: red; 
            color: blue;
        }

但它不起作用。任何人都可以告诉我，我做错了什么？

Answer 1

您必须将a放在类.dropdown-toggle之前，因为该类是a而不是包含它的元素。

我还在颜色中添加了!important，因为它在内联css中声明为白色（优先级较高）。

.dropdown  a.dropdown-toggle:hover {
  background-color: red;
  color: blue!important;
}

你可以在这里测试一下：

＆＃13;

.dropdown a.dropdown-toggle:hover {
  background-color: red;
  color: blue!important;
}

＆＃13;

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color:white;">Our Softwares<span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Software 1</a></li>
    <li><a href="#">Software 2</a></li>
    <li><a href="#">Software 3</a></li>

  </ul>
</li>

＆＃13;

内部CSS功能不起作用

1 个答案: