Question

任何人都可以帮助实现UL的鼠标悬停功能，我的模板中有一组使用相同类的UL标签，但是当我尝试实现mouseover（在mouseover上更改边框颜色）时，该类的所有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; },

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

2 个答案: