css鼠标悬浮控制元素隐藏与显示,这个主要基于hover事件，以及元素的相对定位和绝对定位实现，代码如下：

<div class="float-right">
          <div class="user-head-box" v-if="isLogin" @mouseenter="isShowNav = true" @mouseleave="isShowNav = false">
            <div class="after-login">
              <NuxtLink to="/my/profile">
                <img :src="resourceUrl+'/'+userInfo.avatar || resourceUrl+'/'+defaultUserImage" alt="">
              </NuxtLink>
            </div>
            <div class="user-nav-box" v-if="isShowNav">
              <div class="user-img-box" @click="isShowNav = false">
                <NuxtLink to="/my/profile">
                  <img :src="resourceUrl+'/'+userInfo.avatar || resourceUrl+'/'+defaultUserImage" alt="">
                </NuxtLink>
              </div>
              <div class="user-operate-box" @click="isShowNav = false">
                <ul>
                  <li>
                    <NuxtLink to="/my/course">
                      My course
                    </NuxtLink>
                  </li>
                  <li>
                    <NuxtLink to="/my/certification">
                      My certification
                    </NuxtLink>
                  </li>
                  <li>
                    <NuxtLink to="/my/favorite">
                      My favorite
                    </NuxtLink>
                  </li>
                  <li v-if="userInfo.isAdmin">
                    <a :href="resourceUrl+'/admin'">
                      Backend
                    </a>
                  </li>
                  <li>
                    <a :href="resourceUrl+'/logout'" class="log-out">
                      Log out
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="before-login" v-else>
            <Button @click="loginAction" rounded="none" customColor="#fff" customBgColor="transparent" :active=false
                    variant="quaternary" class="btn-login-style btn">Login
            </Button>
          </div>
        </div>

scss文件：

.user-head-box{
  position: relative; //父级 
  height: 4.375rem;
  margin-right: 1.25rem;
}

.user-nav-box{
  width: 18.125rem;
  position: absolute; //子级
  top: 4.375rem;
  right: 0;
  background-color: #F8F9FD;
  filter: drop-shadow(0px 3.99831px 11.9949px rgba(53, 60, 85, 0.2));
  z-index: 99;
  .user-img-box{
    width: 100%;
    height: 6.25rem;
    padding: 0.875rem 1.25rem;
    img{
      display: block;
      width: 4.5rem;
      height: 4.5rem;
      border-radius: 50%;
    }
  }
  .user-operate-box{
    li{
      height: 3.125rem;
      padding: 0 1.25rem;
      line-height: 3.125rem;
      font-weight: 400;
      cursor: pointer;
      a{
        display: inline-block;
        width: 100%;
        font-size: 0.75rem;
        line-height: 3.125rem;
      }
      .log-out{
        font-size: 0.875rem;
        line-height: 1.3125rem;
      }
    }
  }
}