CSS:
.knowledgeborder{
width:100%;
display: flex;
justify-content: space-between;
}
.class-one{
border: 1px solid blue;
width:20%;
height:300px;
margin:0 2.5%;
border-radius: 20px;
}
.class-one p{
font-size: 18px;
text-align: center;
line-height: 30px;
}
.class-one>div{
width:90%;
background-color:yellow;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
margin: 0 5%;
padding:10px;
border-radius: 10px;
box-sizing: border-box;
/* display: none; */
}
/* .class-one.active>div{
display: block
} */
.class-one>span{
background-color: blue;
color: #fff;
width:90%;
margin: 10px 5%;
padding:10px;
border-radius: 10px;
box-sizing: border-box;
display: block;
opacity: 0;
}
.class-one>span.active{
animation: aaa 5s forwards;
}
@keyframes aaa{
from {opacity: 0; }
to {opacity: 1; }
}
HTML:
<div id="app" class="knowledgeborder">
<div class="class-one" v-for="(item,index) in obj">
<p>{{item.title}}</p>
<div @mouseenter="enter(index)" @mouseleave="leave()">{{item.div}}</div>
<span :class="(seen && index==current) ? 'active' : ''">{{item.span}}</span>
</div>
</div>
JS:
<script>
new Vue({
el: '#app',
data: {
obj:[
{
title: 'i am title',
div: 'i am yellow content',
span: '55555'
},
{
title: 'i am title',
div: 'i am yellow content',
span: '55555'
},
{
title: 'i am title',
div: 'i am yellow content',
span: '55555'
},
{
title: 'i am title',
div: 'i am yellow content',
span: '55555'
},
{
title: 'i am title',
div: 'i am yellow content',
span: '55555'
},
{
title: 'i am title',
div: 'i am yellow content',
span: '55555'
}
],
current: 0,
seen:false,
},
methods:{
enter(index){
this.seen = true;
this.current = index;
},
leave(){
this.seen = false;
this.current = null;
}
}
})
</script>
需要的逻辑和必须写的内容我用黑色加重了。