css - 为什么我不能为整个 <li> 创建悬停背景？

Question

由于某些奇怪的原因，即使我选择了列表，我也无法更改整个列表项的背景。

代码如下:

<div class="project-item" ng-controller="openProjectsCtrl">
    <ol>
        <li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
            <h4>{{project.Title}}</h4>
            {{project.Skills}}
            <span class="col-md-6">{{project.Budget}}</span>
            <span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
        </li>
    </ol>
</div>

<style>
.project-item>ol>li:hover {
    background-color: #eee;
}
</style>

Answer 1

您发布的代码工作正常。请参阅此示例。

.project-item>ol>li:hover {
    background-color: #eee;
}

<div class="project-item" ng-controller="openProjectsCtrl">
    <ol>
        <li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
            <h4>{{project.Title}}</h4>
            {{project.Skills}}
            <span class="col-md-6">{{project.Budget}}</span>
            <span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
        </li>
    </ol>
</div>