通过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兄弟选择器，子元素选择器的灵活使用