uniapp 实现鼠标悬停，字体变色

使用伪类选择器
效果图：当鼠标悬停到字体（公司介绍）上面就会变成红色

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的样式失效）