如何使用CSS将不同的悬停颜色效果应用于不同的Li

Question

我在nav标签内创建了ul，因此我想对不同的li应用不同的背景色悬停效果，但是悬停效果仅应用于锚标签而不是完整的li。

我刚才提到的CSS属性

.main-menu .acc .fa-home,
.main-menu .acc>a:hover {
  background-color: #689f38;
}

.main-menu .fa-laptop,
.main-menu li>a:hover {
  background-color: #ed3b3b;
}

.main-menu .fa-list,
.main-menu .has-list>a:hover {
  background-color: #ef6c00;
}

<nav class="main-menu">
  <ul>
    <li class="acc">
      <a href="#">
        <i class="fa fa-home fa-2x"></i>
        <span class="nav-text">
           List One
        </span>
      </a>
    </li>
    <li class="has-subnav">
      <a href="#">
        <i class="fa fa-laptop fa-2x"></i>
        <span class="nav-text">
            List Two
        </span>
      </a>
    </li>
    <li class="has-list">
      <a href="#">
        <i class="fa fa-list fa-2x"></i>
        <span class="nav-text">
           List Three
        </span>
      </a>
    </li>
  </ul>
</nav>

Answer 1

只需将var app = new Vue({ el: '#app', data: { model: { a:0, b:'', c: { c1:null, c2:0, c3:'test' } }, dirty: false }, watch: { model: { handler(newVal, oldVal) { this.dirty = true; }, deep: true } } }); 定义为:hover元素li而不是li:hover

li>a:hover

.main-menu .acc .fa-home,
.main-menu .acc:hover{
    background-color:#689f38;
}

.main-menu .fa-laptop,
.main-menu li:hover{
    background-color:#ed3b3b;
}

.main-menu .fa-list,
.main-menu .has-list:hover{
    background-color:#ef6c00;
}