html - li.hover 不改变颜色

Question

这是我的html

    <div class="pure-u" id="menu" data-ng-controller="gotoUrl">
            <div class="pure-menu pure-menu-open">
                <a class="pure-menu-heading"
                   href="#">PennyTracker</a>
                <ul>
                    <!-- Add Transaction Button -->
                    <li>
                        <button
                                class="pure-button pure-button-success pure-button-large"
                                data-ng-click="setRoute('new')">
                            <i class="icon-plus"></i>
                            Transaction
                        </button>
                    </li>
                  ......
     </div>

这是我在悬停时尝试更改颜色的cssli

.pure-menu li.hover {
    background: red;
    color: #000000;
}

但是当我悬停时我看不到红色，我看到了

我做错了什么？

Answer 1

你必须把:而不是.,hover 不是一个类。

.pure-menu li:hover {
  background: red;
  color: #000000;
}