<div
class="content2"
:class="temp"
@mouseenter="mouseenterHandle(seq)" //添加鼠标移入事件
@mouseleave="mouseleaveHandle(seq)" //添加鼠标移出事件
v-for="(temp, seq) in data.getHeaders"
:key="temp"
>
·········
// 鼠标移入 添加特殊样式
const mouseenterHandle = (seq: number): void => {
let className = "value" + seq;
var arr = document.getElementsByClassName(className); //想要获取的className
for (let i = 0; i < arr.length; i++) {
//为className添加新的特殊类名
arr[i].classList.add("hoverStyle");
}
};
// 鼠标移出 去掉特殊样式
const mouseleaveHandle = (seq: number): void => {
let className = "value" + seq;
var arr = document.getElementsByClassName(className);
for (let i = 0; i < arr.length; i++) {
//去掉className的特殊类名
arr[i].classList.remove("hoverStyle");
}
};
··········
.hoverStyle {
background-color: #f2faff;
font-size: 16px;
font-weight: 600;
}
添加鼠标移入移出事件,用 js 添加鼠标移入后的特殊类名,移出后删除特殊类名。
猜你喜欢
转载自blog.csdn.net/weixin_45288172/article/details/130345747
今日推荐
周排行