マウスの移動インと移動イベントを追加し、マウスが移動した後に js を使用して特殊クラス名を追加し、移動後に特殊クラス名を削除します。

<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;
}


おすすめ

転載: blog.csdn.net/weixin_45288172/article/details/130345747