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