使用伪类选择器
效果图:当鼠标悬停到字体(公司介绍)上面就会变成红色
template模块
<view>
<view class="left">
<text class="item" v-for="(item,i) in list" >{{item.name}}</text>
</view>
</view>
js部分
data() {
return {
list:[
{
name:'首页'
},
{
name:'公司介绍'
},
{
name:'招商加盟'
},
{
name:'产品中心'
},
{
name:'联系我们'
},
]
}
},
}
css部分 (核心)
.left{
width: 42vw;
display: flex;
justify-content: space-between;
font-size: 1.2vw;
padding-top: 1vw;
text{
color: #333333;
color: colorStyle;
}
text:hover {
color: #dd2222;
}
}
注意:该样式效果最好使用组件封装,我个人没有找出来什么原因,和其他页面一起使用,会导致样式失效(主要是text:hover的样式失效)