为什么鼠标经过li的时候没有变色

Question

没有像图片这样变色

<template>
  <div class="divInput">
        <div class="input" @click="openValue" :class="['input f16', color === 'blue' ? '' : 'white-color']">
          <input v-model="value" type="text" placeholder="筛选">
          <img src="../assets/images/z_x_jt.png" alt="">
        </div>
        <div class="list" v-show="show">
          <ul>
            <li @click="getvalue(index,item)" v-for="(item,index) in tableData" :key="item.index">{{ item.name }}</li>
          </ul>
        </div>
      </div>
</template>

<script>
export default {
  name: 'javascript',
    data(){
      return{
        tableData:[
          {
            'name':111
          },
          {
            'name':222
          },
          {
            'name':333
          }, {
            'name':444
          }
        ],
        show:false,
        value:'',
      }
    },
    methods: {
      openValue(){
        this.show=!this.show;
      },
      getvalue(index,item){
        this.value=item.name;
        this.show=false;
      },
    },
};
</script>

<style scoped>
.divInput{
  /* margin-top: 100px; */
  /* width: 135px; */
    /* width: 105px;
    background: #3A79EE;
    color: #FFFFFF;
    box-shadow: 0px 10px 20px 0px rgba(144, 119, 222, 0.2);
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    cursor: pointer; */

}
  ul li{
    list-style: none;
  }
  .input{
    width: 140px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    border-radius: 50px;
    border: 1px solid #ff0000;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
  }
  .input input{
    border: none;
    outline: none;
    width: 90%;
    color: #3A79EE;
    height: 30px;
    background-color: #fff;
  }
  .input img{
    position: absolute;
    right: 34px;
    top: 48%;
  }
  .list{
    width: 100px;
    border: 1px solid #7047f7;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    top: 50px;
    left: 20px;
    background-color: aquamarine;
  }
  .list ul li{
    width: 100%;
    height: 30px;
    cursor: pointer;
    line-height: 30px;
    padding-left: 10px;
  }
  .list ul li:hover{
    background-color: #cccccc;
  }
</style>

Answer 1

你这样写也没问题，你给li一个颜色看有没有生效，先排查是所有样式是不是都不生效