鼠标点击改变<div>背景色 , 鼠标移入移出 遇到被点击的<div>终止背景渲染，移出<div>启动背景渲染 该如何做？

Question

<div v-for="(pvlis,index) in pvnav" :class="{pvcolor:index==dynamic}" @click="pvbs(pvlis.url,index)" >  
 <div class="pv-left-btn" @mouseenter="bcolor($event)"@mouseleave="wcolor($event)">  
 <span><li :class="''+pvlis.cla"></li></span>  
  {{pvlis.name}}  
    </div>  
</div>

data(){  
    return{  
       pvnav:[  
          {name:"权限管理", cla:"pv-images4", url:"/mine/pvpermissions"},  
          {name:"信息发布", cla:"pv-images5", url:"mine/pvrelease"},  
          {name:"评价管理", cla:"pv-images6"},  
          {name:"名厨亮灶", cla:"pv-images7"},  
          {name:"系统设置", cla:"pv-images8"}  ],  
          dynamic:-1,  
          }  
},  
  methods:{  
    pvbs(url,index){  
      this.$router.push({ path: url })  
      this.dynamic = index;  
  },  
  bcolor: function(e){  
      e.target.style.backgroundColor =" #211E2F";  
      e.target.style.cursor="pointer";  
  },  
  wcolor: function(e){  
      e.target.style.backgroundColor =  ""  
  }  
    }

Answer 1

你这个描述有点难懂啊。我换个说法你看看对不对

1. 默认色（无交互，未选中）
2. 移入色（hover交互，未选中）
3. 选中色（无交互，已选中）
4. 选中色 > 移入色 > 默认色。

方案1：mouseenter、mouseleave、click 测试地址 http://jsrun.pro/rpfKp/edit

/*那么你写样式，通过权重来限制不就好了？*/
.btn{background: #f00}
.btn.hover{background: #0f0}
.btn.checked{background: #00f}

方案2：hover active http://jsrun.pro/ApfKp/edit

 .btn{background: #f00}
 .btn:hover{background: #0f0}
 .btn:active{background: #00f}