html - 内部 CSS 功能不起作用

Question

我有一个下拉列表的代码示例。当我将鼠标悬停在名称 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;
}

你可以在这里测试一下:

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

<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>