zoukankan      html  css  js  c++  java
  • 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(hideHello333);
      });
      // hides the DIV
      function hideHello() {
        $(".mini-loginBox").css("visibility""hidden");
      }
    });
  • 相关阅读:
    实习应聘总结
    SSH:远程登陆
    对HashMap进行排序
    python笔记-集合类型
    python笔记-序列类型
    python笔记-数字类型
    python笔记-变量与字符串
    python笔记-数据类型
    C#winform调用外部程序,等待外部程序执行完毕才执行下面代码
    防止查询数据返回数据行为零引起的逻辑判断重复或抛出异常
  • 原文地址:https://www.cnblogs.com/2Octobering/p/13128619.html
Copyright © 2011-2022 走看看