vue实现鼠标放上去就有提示_css – 如何在VueJS中实现鼠标悬停？

任何人都可以帮助实现UL的鼠标功能,

我的模板中有一组使用相同类的UL标签,但是当我尝试实现鼠标悬停(在鼠标悬停时更改边框颜色)时,所有带有该类的UL标签都会突出显示.

我对VUE很陌生.

模板

Notification

Message

脚本

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;

}

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

谢谢,