CSS Vue ul鼠标移动到多个li标签上字体高亮

1.字体高亮

      <ul v-for="(item,index) in tableData" :key="index" class="smart_nav_con">
        <li :class="colorHover===index?'smart_index':'a_white'" style="display:inline-block; width: 100%" @mouseenter="spanHover(index)">
          <a class="white a_color bnContentCss" @click.prevent="xiangxi(item)">{{ item.bnContent }}</a>
          <a class="white a_color bnDateCss" @click.prevent="xiangxi(item)">{{ item.bnDate }}</a>
          <a class="white a_color bnPublishNameCss" @click.prevent="xiangxi(item)">{{ item.bnPublishName }}</a>
        </li>
      </ul>

data(){
	return{
	      colorHover: 0
	}
}
methods:{
    spanHover: function(index) {
      this.colorHover = index
    }
}
`
```css
  .smart_nav_con{
    color:black;
    position: relative;
    padding-left: 10px;
    padding-top: 12px;
  }
  .smart_nav_con .smart_index .a_white{
    color:black;
  }
  .smart_nav_con .smart_index .a_color{
    color:#00a0e9;
  }
  .smart_nav_con li a{
    color:black;
  }
  .smart_nav_con .smart_index a{
    color:#00a0e9;
  }
  .bnContentCss{
    font-size: 14px;
    color: #666666;
    width: 60%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display: inline-block
  }
  .bnDateCss{
    font-size: 14px;
    color: #9b9b9b;
    display: inline-block;
    float: right;
    margin-right: 13px;
  }
  .bnPublishNameCss{
    font-size: 14px;
    color: #82796f;
    display:inline-block;
    float: right;
    position: relative;
    right: 15px;
  }
  .ulCss{
    list-style: none;
    padding-left: 10px;
    padding-top: 8px;
    color:#fff;
  }

效果

2.移动到元素上对应改变背景色

    <ul v-for="(item,index) in tableData" :key="index" style="list-style: none;padding-left: 10px;">
      <li :class="active === index?'smart_index':'a_white'" style="display:inline-block; width: 98%" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)">
        <a class="circle">
          <div class="circletext" @click.prevent="xiangxi(item)" v-html="formatDate(item.bnDate)" />
        </a>
        <div style="display:inline-block;position: relative;top: 3px;width: 80%;margin-left: 12px">
          <a style="width: 80%" @click.prevent="xiangxi(item)">
            <span class="NoticeTitle">{{ item.bnTitle }}</span>
          </a>
          <a style="width: 80%" @click.prevent="xiangxi(item)">
            <span class="NoticeContent">{{ item.bnContent }}</span>
          </a>
        </div>
      </li>
    </ul>

data(){
	return{
	     active: 0,
	}
}
methods:{
     mouseOver: function(index) {
      this.active = index
    },
    mouseLeave: function(index) {
      this.active = index
    }
}

  .smart_index{
  background-color: #F5F5F5;
}
  .a_white{
    background-color: #ffffff;
  }

效果