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

Question

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

以下是代码：

foreach {val1 val2} $file_data {
    lappend acol $val1
    lappend bcol $val2
}

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>

Answer 2

此代码似乎有效。 更改颜色非常难以在白色背景上看到灰色。

.project-item ol li:hover {

  background-color: firebrick;

}

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

Answer 3

我通过在第一个跨度上移除浮动并且向右浮动来解决了这个问题。这似乎有效。