图片取自uniapp官方文档https://uniapp.dcloud.io/component/view
detail.vue
<template>
<view>
<!-- <view>
<text>无敌季卡拉诺在学习</text>
</view>
<view>
<text selectable>无敌季卡拉诺在学习</text>//selectable长按可选
</view>
<view>
<text selectable space="ensp">无敌季 卡拉诺在学习</text>//空格所占大小 space
</view> -->
<view class="box2" hover-class="box2-active">
<view class="box" hover-class="box-active" hover-stop-propagation :hover-stay-time="2000">我是无敌季卡拉诺</view><!-- //hover-class按下去的样式hover-stop-propagation停止冒泡,:可以"取数字" -->
</view>
</view>
</template>
<script>
</script>
<style>
.box{
width: 100px;
height: 100px;
background: #4CD964;
}
.box-active{
background:#007AFF;
}
.box2{
width: 200px;
height: 200px;
background: #F0AD4E;
}
.box2-active{
width: 200px;
height: 200px;
background:#3F536E;
}
</style>
效果展示