css - 如何在 a 上实现鼠标悬停在 VueJS 中？

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;
}

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

谢谢，

标签： cssvuejs2vue-componentvue-router

Answer 1

您几乎可以在 CSS 中使用:hover伪类完全做到这一点。

.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>