mouseover鼠标在div上仍显示隐藏的div

HTML

<div class="top-loginbox">

          <ul class="login-ul">

            <div

              class="mini-login"

              onmouseover="document.all.Layer1.style.visibility=''"

              onmouseout="document.all.Layer1.style.visibility='hidden'"

            >

              <li class="login-li">

                <a href>

                  <img src="@/assets/images/akari.jpg" alt="2233" />

                </a>

              </li>

              <li class="login-li">

                <a href="/login" target="_blank">登录</a>

              </li>

            </div>

            <li class="regist-li">

              <a href>注册</a>

            </li>

          </ul>

          <div class="topSub">

            <a href>投稿</a>

          </div>

          <!-- 隐藏层 -->

          <div class="mini-loginBox" id="Layer1" style="visibility:hidden">

            <p>登录后可了解:</p>

            <div class="swiperBox">

              <swiper :options="mySwiperOption" class="my-gallery" ref="mySwiper">

                <swiper-slide class="slide1">

                  <img src="../../assets/images/mini-loginImg1.gif" alt />

                </swiper-slide>

                <swiper-slide class="slide2">

                  <img src="../../assets/images/mini-loginImg1.gif" alt />

                </swiper-slide>

              </swiper>

            </div>

            <div class="btn-switch">

              <el-button type="primary">登录</el-button>

              <el-button type="success">注册</el-button>

            </div>

          </div>

        </div>

JS:

我使用setTimeout函数(延迟;等待)来更改css属性.将setTimeout的时间间隔设置为~333-500毫秒,

并将div的鼠标悬停设置为清除超时.然后,在div本身的mouseout上,再次设置计时器:)

import $ from "jquery";

// mouseover鼠标在div上仍显示隐藏的div

// timer for hiding the div

$(document).ready(function() {

  var hideTimer;

  // show the DIV on mouse over

  $(".mini-loginBox").mouseover(function() {

    // forget any hiding events in timer

    clearTimeout(hideTimer);

    $(".mini-loginBox").css("visibility", "");

  });

  // set a timer to hide the DIV

  $(".mini-loginBox").mouseout(function() {

    hideTimer = setTimeout(hideHello, 333);

  });

  // hides the DIV

  function hideHello() {

    $(".mini-loginBox").css("visibility", "hidden");

  }

});