vue3 鼠标移入 v-for 的元素, 实现移入动画, 图片放大, 文字变色

最新推荐文章于 2024-06-25 21:21:36 发布

晒黑的小神仙

最新推荐文章于 2024-06-25 21:21:36 发布

阅读量690

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_61273407/article/details/132430992

版权

<el-card shadow="hover" v-for="(item, index) in arr" :key="item.id" class="news-box" @mouseenter="hoverNewsBox(item.id, index)" @mouseleave="leaveNewsBox(item.id, index)">
    <div class="news-border" :class="{news_border_hover: isActive(item.id)}"></div>
</el-card>

import { ref, onMounted } from "vue";
// 鼠标移入的活动元素
let activeItem = ref(null)

// 判断是否为鼠标移入的选中节点
const isActive = (item) => {
    return activeItem.value === item
}

// 鼠标移入事件
const hoverNewsBox = (item, index) => {
    console.log('移入了');
    activeItem.value = item;
}
// 鼠标移出事件
const leaveNewsBox = (item, index) => {
    activeItem.value = null;
}

.news-border {
    width: 30px;
    height: 2px;
    background: #d7d7d7;
    margin: 10px 0;
    // 动画过度时间 0.4秒
    transition: all .4s;
}
.news_border_hover {
    background: #000000;
}