<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;
}
Add mouse move in and out events, use js to add the special class name after the mouse moves in, and delete the special class name after moving out.
Guess you like
Origin blog.csdn.net/weixin_45288172/article/details/130345747
Recommended
Ranking