问答博客资讯标签用户活动
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

hover时显示div，此时点击div，大概率导致hover失效，div消失。请问如何解决？

头像
盐酥鸡加甘梅粉
    911714

    dom如下：

    <li>
    <a href="javascript:;" title=""></a>
    <div class="pop">隐藏的div</div>
</li>

    css如下：

    .pop {
    display: none;
    position: absolute;
}
li {
    position: relative;
}
li:hover {
    .pop {
        display: block;
    }
}

    chrome 下：
    当 hover li 时，显示 div.pop，此时多次点击 div.pop（并非连续快速点击，而是很随意的点击），就有可能导致该 div 消失。

    注明：该div内有个轮播，点击内部的箭头，有滑动效果。

    个人猜测：
    1、click 时导致鼠标失去了焦点，hover失效。
    2、click 具有 css3 属性的元素时，会导致 hover 失效。

    这个 bug 头痛万分，有没有大神能解答一下，给个解决方案呢？谢谢！

    cssjavascriptjquery
    阅读 7k
    4 个回答
    得票最新
    头像
    RU12
      558

      用js来控制显示隐藏，在父级元素 li加上onmouseover和onmouseout函数
      隐藏的DIV 你自己控制点击函数

      <style>

      .pop {
    display: none;
    position: absolute;
}
li {
    position: relative;
}
/*li:hover .pop {*/
    /*display: block;*/
/*}*/

      </style>
      <body>

      <li onmouseover="show()" onmouseout="hide()">
    <a href="javascript:;" title=""></a>
    <div class="pop" id="pop"  onclick="check()">
        隐藏的div
    </div>
</li>

      </body>
      <script>

      var i=0
function show() {
    document.getElementById('pop').style.display = 'block'
}
function hide() {
    document.getElementById('pop').style.display = 'none'
}
function check(){
    console.log('点击了' + i++)
}

      </script>

      图片描述

      头像
      我有一头小毛驴
        1
        新手上路，请多包涵

        添加参数使hover事件和click时间隔离
        var isMouseOver = true; //控制鼠标hover事件和click事件的冲突

        $(".div").hover(function(){
    isMouseOver = true
    //程序处理逻辑
},function(){
    if(isMouseOver){
        //程序处理逻辑
    }
});
$(".div").click(function(){
isMouseOver = false;
//程序处理逻辑

        });

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