|
一、项目需求需要用到选项卡，但是发现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引入的，数据自己添加，有问题欢迎联系，还有更简便的也欢迎讨论。
| 
转播
