vue动态绑定hover颜色

vue绑定普通的style不难，但是绑定hover好像就不知道从哪下手了，参考了如下链接，发现做出来也不难。

https://www.cnblogs.com/ljg1998/p/13674671.html

这是html

<div class="card-hint" :style="cardTypeStyle">
   {{cardHint.text}}
</div>

接下来写计算属性computed

computed: {
  cardTypeStyle: function() {
    return {
      '--text-color': this.cardType.textColor,
      '--text-color-hover': this.cardType.textColorHover,
      '--bg-color': this.cardType.bgColor,
      '--bg-color-hover': this.cardType.bgColorHover
    }
  }
}

接下来写css

.card-item .card-type .card-type-text {
  color:var(--text-color);
  background-color:var(--bg-color);
}
.card-item:hover .card-type .card-type-text {
  color:var(--text-color-hover);
  background-color:var(--bg-color-hover);
}

原理是用了css的属性

https://www.runoob.com/cssref/func-var.html

结束！