鼠标移入添加class样式
HTML
HTML绑定事件,加入或者移出class为active
<span class="things" @click="toThings()" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">报事</span>
<span class="things" @click="toRepairs()" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">报修</span>
注意这里v-on不能直接省略为@ ,我也不知道啥原因,反正试过了用@符号没有效果,可能我的页面没有直接渲染。
JS
这里除了active这个class需要动态添加或者减去,其他的皆是移入移出都需要的class
红框内所示
methods: {
changeActive($event){
$event.currentTarget.className="things active";
},
removeActive($event){
$event.currentTarget.className="things";
}
},
CSS
thing类为原来的样式,active为鼠标移上去的样式
.things{
display: block;
width: 3rem;
height: 3rem;
border-radius: 50%;
font-size: 0.37rem;
text-align: center;
line-height: 3rem;
margin:0.8rem auto;
background: #f4f5f7;
color:#666666;
}
.active{
background: #FEDF51;
color:#a66f15;
}
注意,这里如果直接用伪类样式的方法的话.thing:hover{background:#fedf51;color:#a66f15;}的话,鼠标移上去只出现一下的效果,页面返回去看不到当前是点的哪一个选项,所以vue.js最好不要用hover。
拓展知识:vue实现鼠标移入移出事件
如下所示:
<div class="index_tableTitle clearfix" v-for="(item,index) in table_tit">
<div class="indexItem">
<span :title="item.name">{{item.name}}</span>
<span class="mypor">
<i class="icon" @mouseenter="enter(index)" @mouseleave="leave()"></i>
<div v-show="seen&&index==current" class="index-show">
<div class="tip_Wrapinner">{{item.det}}</div>
</div>
</span>
</div>
</div>
export default {
data(){
return{
seen:false,
current:0
}
},
methods:{
enter(index){
this.seen = true;
this.current = index;
},
leave(){
this.seen = false;
this.current = null;
}
}
}