vue 利用不同的class名来实现
1、写两个悬浮状态的样式
.hoverColor{
color: #fff;
}
2、给两个状态绑定两个值
export default {
data: function(){
return {
hoverIndex: -1, //表示当前hover的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li
}
},
}
3、hover的时候让hoverIndex等于hover的li,点击时候一样
@mouseover="hoverIndex = index"
4、鼠标移出又取消移出状态 即让hover的li为 -1 或 null
@mouseout="hoverIndex = -1"
5、利用 hoverIndex 和 clickIndex 来给li不同的class名 实现效果
:class="{'hoverColor'':index==hoverIndex}"
完整代码：
<template>
<ul class="item">
<li v-for="(item, index) in Arr" :key="index"
:class="{'hoverBg':index==hoverIndex}"
@mouseover="hoverIndex = index"
@mouseout="hoverIndex = -1">
{{item}}
</li>
</ul>
</template>
<script>
export default {
data: function(){
return {
Arr:['A','B','C','D'],
hoverIndex: -1, //表示当前hover的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li
}
},
}
</script>
<style>
.item{
width: 600px;
height: 60px;
}
.item li{
width: 80px;
height: 60px;
line-height: 60px;
margin-left: 20px;
float: left;
text-align: center;
cursor: pointer;
}
.hoverBg{
background: #ccc;
color: #fff;
}
.clickBg{
background: red;
color: #fff;
}
</style>
