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;css鼠标点击样式
margin: 1px 0;
padding-left: 1em;
}
有没有更好的⽅法来实现这个?
谢谢,
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论