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.

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


Guess you like

Origin blog.csdn.net/weixin_45288172/article/details/130345747
Recommended