Vue.js 中实现动态悬停效果的两种技巧

本文主要是介绍Vue.js 中实现动态悬停效果的两种技巧，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

引言

在 Vue.js 开发中，动态响应用户操作是提升应用互动性和用户体验的关键。本文将介绍两种实现鼠标悬停时改变元素样式的方法，帮助开发者轻松实现这一功能。

一、使用 Vue 的 @mouseover 事件

第一种方法是利用 Vue 的事件处理机制。通过监听 mouseover 事件来动态设置样式。以下是一个简单的示例：

<div class="content":style="'background-color: ' + getColorByIndex(activeIndex, index)"v-for="(item, index) in vehicleForm.tpcPassList" :key="index"@mouseover="activeIndex = index"
><div class="left"></div><div class="right" v-show="index === activeIndex"></div>
</div>data() {return {activeIndex: null, // 初始化为 null// ... 其他数据};
}methods: {getColorByIndex(activeIndex, index) {if (activeIndex === index) {return 'rgba(10,65,139,0.31);'} else {return 'transparent'}},
},

在 data 中定义 activeIndex 来跟踪当前悬停的元素索引，并在 methods 中定义 getColorByIndex 来返回相应的背景颜色。

二、CSS 伪类 :hover 的简洁实现

对于更简洁的实现，CSS 伪类 :hover 是一个不错的选择。这种方法减少了 JavaScript 的使用，使代码更加简洁：

<div class="content"  v-for="(item, index) in vehicleForm.tpcPassList" :key="index"><div class="left"></div><div class="right"></div>
</div>/* 定义悬停时的背景颜色 */
.content:hover {background-color: #f0f0f0; /* 悬停时的背景颜色 */
}
/* 定义非悬停时.right类的隐藏 */
.content .right {display: none;
}
/* 定义悬停时.right类的显示 */
.content:hover .right {display: block; /* 或者使用其他值，如 flex, inline-block 等 */
}

在 HTML 中，我们不再需要使用 v-show 来控制 .right 的显示，而是完全通过 CSS 来控制。