添加鼠标移入移出事件，用 js 添加鼠标移入后的特殊类名，移出后删除特殊类名。

最新推荐文章于 2024-04-07 13:01:24 发布

不爱吃饭爱吃菜

最新推荐文章于 2024-04-07 13:01:24 发布

阅读量494

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_45288172/article/details/130345747

该文章描述了如何在Vue组件中利用@mouseenter和@mouseleave事件监听器，结合JavaScript函数动态地为元素添加和移除特定的CSS类，以改变背景色和字体样式。当鼠标移入时，元素获得.hoverStyle类，增加背景色和改变字体属性；鼠标移出时，这些样式被移除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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