vue 类似于hover的选项卡

一、项目需求需要用到选项卡，但是发现vue只有css才有hover，js没有这个事件，查阅了资料，最后发现可以用@mousemove和@mouseout来实现鼠标悬停类似于hover的效果，下面先上一个效果图：

二、废话不多说啦，直接上代码：html

<div class="trademark-left">
					<div class="trademark-title">
						<span>全部服务分类</span>
					</div>
					<div class="classification" @mousemove="getmousemove(index,item.id)" @mouseout="getmouseout()"
						v-for="(item,index) in classList" :key="index">
						<div class="classification1"><span>{{item.typeName}}</span></div>
						<div class="trademark-right1" @mousemove="getmousemove(index,item.id)" @mouseout="getmouseout()"
							v-if="category == item.id">
							<div class="categoryBox">
								<div class="category" v-for="(items,i) in item.typeList" :key="i">
									<div class="categoryTitle"><span>{{items.typeTitle}}</span></div>
									<div class="categoryInfo">
										<div class="category-box" v-for="(info,j) in items.typeInfo" :key="j">
											<span>{{info}}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

三、css

.trademark-left{
	width: 13.125rem;
	height: auto;
	border-radius: 0.3125rem;
	overflow: hidden;
}

.trademark-title{
	width: 100%;
	height: 2.5rem;
	line-height: 2.5rem;
	text-align: center;
	color: #fff;
	background-color: #ed2f2e;
	font-size: 1rem;
}
.classification{
	width: 100%;
	height: 2.8125rem;
	background-color: #333333;
	cursor: pointer;
}
.classification:hover{
	background-color: #fff;
	color: #333;
}
.classification:hover .classification1{
	color: #333;
}
.classification:hover .classification1::after{
	border-right: 0.0625rem solid #333;
	border-top: 0.0625rem solid #333;
}
.classification1{
	width: 85%;
	height: 2.8125rem;
	line-height: 2.8125rem;
	margin: auto;
	position: relative;
	font-size: 0.875rem;
	color: #fff;
}
.classification1::after{
	content: "";
	position: absolute;
	right: 0.625rem;
	top: 1.125rem;
	width: 0.625rem;
	height: 0.625rem;
	border-right: 0.0625rem solid #fff;
	border-top: 0.0625rem solid #fff;
	transform: rotate(45deg);
}

.trademark-right1{
	width: 61.875rem;
	height: auto;
	min-height: 41.875rem;
	background-color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;
}
.categoryBox{
	width: 95%;
	height: auto;
	margin: 2% auto;
	
}
.category{
	width: 100%;
	height: auto;
}
.categoryTitle{
	width: 100%;
	height: 2.5rem;
	line-height: 2.5rem;
	text-align: left;
	font-size: 0.875rem;
	font-weight: bold;
}
.categoryInfo{
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}
.category-box{
	height: 1.875rem;
	line-height: 2rem;
	text-align: center;
	background-color: #575A63;
	color: #fff;
	font-size: 0.8125rem;
	border-radius: 0.3125rem;
	padding: 0 0.5rem;
	margin: 0.3125rem;
}
.category-box:hover{
	color: #f2270c;
}

四、js

<script type="text/javascript">
			var classData = [{
					id: 0,
					typeName: '食品餐饮',
					typeList: [{
						typeTitle: '食品餐饮',
						typeInfo: [
							'预包装食品经营许可证',
							'餐饮食品经营许可证',
						]
					}]
				},
				{
					id: 1,
					typeName: '贸易进出口',
					typeList: [{
						typeTitle: '贸易进出口',
						typeInfo: [
							'进出口权',
						]
					}]
				},
            .
            .
            .
        ];
new Vue({
				el: '#app',
				data() {
					return {
						classList: classData,
						category: -1
					}
				},
				mounted() {

				},
				methods: {
					getmousemove(index, ids) {
						let num = this.classList[index].id;
						this.category = num;
					},
					getmouseout() {
						this.category = -1;

					}
				}
			})

五、因为做的是几个单页，所以我并没有搭建vue环境，而是用CDN引入的，数据自己添加，有问题欢迎联系，还有更简便的也欢迎讨论。