vue3实现div盒子的内容hover上去时样式改变及部分元素的显隐

本文主要是介绍vue3实现div盒子的内容hover上去时样式改变及部分元素的显隐，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

样式：

hover后的样式：

整体盒子的背景颜色发生了改变，盒子内边距发生了改变，右下侧的箭头出现

实现方式：

利用mouseover和mouseout并结合css样式实现

template中：

<divclass="new-item"v-for="(item, index) in newsList":key="index"@mouseover="showArrow(index)"@mouseout="hideArrow(index)"><div class="new-content"><div class="new-title">{{ item.title }}</div><div class="new-des">{{ item.describes }}</div></div><div class="new-time"><div class="time" :class="{ 'time-active': isArrowVisible(index) }">{{ item.publishTime ? item.publishTime.substring(0, 10) : '' }}</div><div class="new-img" :class="{ visible: isArrowVisible(index) }"><img src="/images/header/right-arrow.png" /></div></div></div>

script中： 

const newsList= ref([]);// 新闻item的鼠标悬浮
const showArrow = (index) => {hoveredIndices.value.push(index);
};
// 新闻item的鼠标离开
const hideArrow = (index) => {const indexToRemove = hoveredIndices.value.indexOf(index);if (indexToRemove !== -1) {hoveredIndices.value.splice(indexToRemove, 1);}
};
// 是否展示箭头--新闻列表中的数据右下侧
const isArrowVisible = (index) => {return hoveredIndices.value.includes(index);
};

style中：

.new-item {display: flex;width: 100%;border-bottom: 1px solid #e5e6eb;padding: 50px 0;box-sizing: border-box;cursor: pointer;.new-content {display: flex;flex-direction: column;width: 85%;.new-title {font-family: Source Han Sans;font-size: 22px;font-weight: 500;line-height: 33px;text-align: left;color: #161b2c;margin-bottom: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1; // 自定义行数-webkit-box-orient: vertical;}.new-des {font-family: Source Han Sans;font-size: 14px;font-weight: 350;line-height: 26px;text-align: left;color: #86909c;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; // 自定义行数-webkit-box-orient: vertical;}}.new-time {font-family: DIN;font-size: 30px;font-weight: 500;line-height: 30px;text-align: right;color: #86909c;margin-left: auto;display: flex;flex-direction: column;align-items: flex-end;.new-img {margin-top: 70px;opacity: 0; /* 默认隐藏箭头 */transition: opacity 0.3s ease; /* 添加过渡效果 */}.new-img.visible {opacity: 1; /* 悬浮时显示箭头 */}}.new-time .time-active {color: #4e5969;}}.new-item:hover {background-color: #f9f9f9; /* 悬浮时的背景颜色 */padding: 50px 30px;box-sizing: border-box;}

这篇关于vue3实现div盒子的内容hover上去时样式改变及部分元素的显隐的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---