通过css隐藏popover的效果:即hover显示或隐藏另一个元素

本文主要是介绍通过css隐藏popover的效果:即hover显示或隐藏另一个元素，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

场景一：隐藏旁边的兄弟元素

在原生的微信小程序上实现下图hover后出现提示的效果，如果是PC端就可以直接使用el-popover，但是小程序，我没有看到适合的组件。

样式代码<van-field value="{{ username }}" clearable placeholder="请填写法人姓名"><view class="label-box" slot="label">  van-field的label插槽<text>法人姓名</text><image style="width: 20rpx; margin-left: 5rpx;" class="label-icon" src="https://xxx.com/common-tip-icon.png" mode="widthFix" />  图标地址<image class="label-text-img" src="https://xxx.com/common-tips-text.png" mode="widthFix" />  提示图片</view> </van-field>

 css代码

.label-box{position: relative;
}
.label-text-img{position: absolute;height: 60rpx;z-index: 500;left: 0;top: 20rpx;display: none;width: 400rpx;
}
.label-icon:hover+.label-text-img{display: block;
}

场景二：父元素改变子元素

html
<div class="father">父元素<div class="son">子元素</div>
</div>css样式
.father{width: 200px;height: 200px;background: #cc66dd;}.son{width: 100px;height: 100px;background: #3333dd;display: none;}.father:hover .son{display: block;}

场景三：兄弟A改变兄弟B的子元素

  <div class="brother1">大弟</div><div class="brother2">二弟<div class="brother2-son">二弟儿子</div></div>css.brother1{width: 100px;height:100px;background: #cc66dd;}.brother2{width: 100px;height: 100px;background: #3333dd;}.brother2-son{width: 50px;height: 50px;background: #ffff00;display: none;}.brother1:hover+.brother2>.brother2-son{   display: block;}

重点就是css兄弟选择器，子元素选择器的灵活使用 

 

 

 

这篇关于通过css隐藏popover的效果:即hover显示或隐藏另一个元素的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---