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

样式：

hover后的样式：

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

实现方式：

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

template中：

<div
					class="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;
		}