如何在 VueJS 中的 <ul> 上实现鼠标悬停？

Question

任何人都可以帮助实现 UL 的鼠标悬停功能吗？ 我的模板中有一组使用相同类的 UL 标记，但是当我尝试实现鼠标悬停（鼠标悬停时更改边框颜色）时，所有具有该类的 UL 标记都被突出显示。 我对 VUE 还是很陌生。

模板

<ul v-bind:class="[sbitmcls]"  @mouseover="mouseOver" @mouseleave="mouseOut">
  <img src="../assets/notification.png" alt="" height="30" width="30">
  <span> Notification  </span>
</ul>

<ul v-bind:class="[sbitmcls]"  @mouseover="mouseOver" @mouseleave="mouseOut">
  <img src="../assets/message.png" alt="" height="30" width="30">
  <span> Message  </span>
</ul>

脚本

data() {
  return {
    sbitmcls: "image",
    active: true
    };
  },
  methods: {
    onClick() {
    this.$router.push("/homepage");
  },
  mouseOver: function(name) {
    this.sbitmcls = "imageSelected"
  },
  mouseOut: function() {
    event.target.style.background = "#4a4b45";
  }
}

风格：

.image {
  display: relative;
  background-color: #4a4b45;
  color: white;
  font-family: Rubik, "Bookman", Garamond, "Times New Roman", Times, serif;
  font-size: 1.2em;
  font-style: bold;
  line-height: 2em;
  height: 5%;
  border-left: 5px solid #4a4b45;
  margin-right: 50px;
  margin: 1px 0;
  padding-left: 1em;
}

.imageSelected {
  display: relative;
  background-color: #575a51;
  color: white;
  font-family: Rubik, "Bookman", Garamond, "Times New Roman", Times, serif;
  font-size: 1.2em;
  font-style: bold;
  line-height: 2em;
  height: 5%;
  border-left: 5px solid blue;
  margin-right: 50px;
  margin: 1px 0;
  padding-left: 1em;
}

有没有更好的方法来实现这个？

谢谢，

Answer 1

使用:hover pseudo-class，您几乎可以在 CSS 中完全做到这一点。

.image {
  /* your CSS for the image class */
}

.image.hovered, .image:hover {
  border-left-color: blue;
}

.image:hover {
  background-color: #575a51;
}

您的模板只需要

<ul class="image" @mouseover.once="$event.target.classList.add('hovered')">

这会将hovered 类添加到您的元素，当它第一次鼠标悬停时，它会保持蓝色边框颜色，而背景颜色会返回到其默认值。

new Vue({el: '#app'})

.image {
  display: relative;
  background-color: #4a4b45;
  color: white;
  font-family: Rubik, "Bookman", Garamond, "Times New Roman", Times, serif;
  font-size: 1.2em;
  font-style: bold;
  line-height: 2em;
  height: 5%;
  border-left: 5px solid #4a4b45;
  margin-right: 50px;
  margin: 1px 0;
  padding-left: 1em;
}

.image.hovered, .image:hover {
  border-left-color: blue;
}

.image:hover {
  background-color: #575a51;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <ul class="image" @mouseover.once="$event.target.classList.add('hovered')">
    <img src="https://picsum.photos/30" alt="" height="30" width="30">
    <span> Notification  </span>
  </ul>

  <ul class="image" @mouseover.once="$event.target.classList.add('hovered')">
    <img src="https://picsum.photos/30" alt="" height="30" width="30">
    <span> Message  </span>
  </ul>
</div>

Answer 2

尝试将类绑定到数据值，例如：

 <ul :class="{'imageSelected': selected === true, 'image': selected ===
 false}" @mouseover="mouseOver" @mouseleave="mouseOut"> ... data() {
 return {   selected: false   }; }, methods: {    mouseOver:
 function(name) {    this.selected = true; },