问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jquery鼠标移入移出显示隐藏div，鼠标移动到该div保持显示状态

头像
dingfc
    4373963

    jquery鼠标移入移出切换按钮，显示隐藏div，鼠标移动到该div怎样保持显示状态？

    image.png

    代码如下：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin-top: 10px;
            display: none
        }
    </style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").hover(function(){
    $(".box").show();
    },function(){
    $(".box").hide();
  });
});
</script>
</head>
<body>
    <button>切换</button>
    <div class="box">鼠标移动到该div保持显示状态。</div>
</body>
</html>
    javascriptjquery
    阅读 4.6k
    4 个回答
    得票最新
    头像
    hfhan
      29k72241

      这种需求一般用在悬停用户头像出现选项卡或者购物车按钮之类的。常用的方法是把按钮和列表放在一个父元素内，列表使用position定位列表，这样不会撑开父元素，然后把悬停事件放在父元素上，这样悬停在按钮和列表的时候事件会冒泡到父元素，如果按钮和列表中间有距离可以使用margin实现，不用margin或者不用这种布局，就需要延迟执行移入移出的事件，此时按钮和列表可以做相同的事件绑定

      已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。
      头像
      linong
        29.2k1266132

        很难。因为移走的时候隐藏事件已经触发。

        那么我们只需要让他移走的时候不隐藏即可，那应该怎么实现呢？ setTimeout 即可，做一个缓冲事件，如果在规定事件内重新 hover 了，那么就移除 clearTimeout

        已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。
        头像
        NickWang
          1.3k1113

          思路、思路、思路。

          <div class="demo" onmouseout="this.removeClass('active')"> // 这个div是感应区，在鼠标离开这个div之后自动移除active这个class
    <button onclick="this.parentNode.addClass('active')"> // 这个button事件给父级div一个附加class: active
    <div> // 这个div默认隐藏，但是当父级div具有active这个class时会显示
</div>
<style>
.demo > div { display: none;}
.demo.active > div {display: block;}
</style>

          已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

          头像
          JackZhouMine
            19521337
            <div id="container">
  <button id="btn">按钮</button>
  <div class="show" id="inner">
    hello
  </div>
</div>

            js 代码：

            import hoverintent from "https://cdn.skypack.dev/hoverintent@2.2.1";
const el = document.querySelector("#inner");
const container = document.querySelector("#container");
const btn = document.querySelector("#btn");

hoverintent(container, show, hide);
// hoverintent(btn,show, hide)
function show(event) {
  console.log(event.target.id);
  // if (event.target.id === "container") return;
  el.classList.add("show");
  el.classList.remove("hide");
}

function hide() {
  el.classList.add("hide");
  el.classList.remove("show");
}

            demo:

            应该能满足你的需求，万望采纳。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题