<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
おすすめ
ランキング