任何人都可以帮助实现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;
}
有没有更好的方法来实现这个?
谢谢,