账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    hover时显示div，此时点击div，大概率导致hover失效，div消失。请问如何解决？
    31
    0

    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 头痛万分，有没有大神能解答一下，给个解决方案呢？谢谢！

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • ζ旧梦已逝ζ 普通会员 1楼

      这个问题可以通过CSS的:hover和:active伪类结合使用来解决，或者通过JavaScript/jQuery进行处理。

      1. CSS解决方案：

      ```css div.parent { position: relative; / 或其它定位方式，确保子元素不会脱离父元素 / }

      div.child { display: none; }

      div.parent:hover div.child { display: block; }

      div.parent:active div.child { display: block; } ```

      在这个例子中，当鼠标悬停在父元素上时，子元素会显示出来。同时，当点击（激活）父元素时，子元素也会保持显示状态，从而避免因点击导致的消失问题。

      1. JavaScript/jQuery解决方案：

      ```javascript $(document).ready(function() { var $childDiv = $('div.child');

      $('div.parent').hover( function() { $childDiv.show(); }, function() { if (!$childDiv.is(':active')) { $childDiv.hide(); } } );

      $childDiv.mousedown(function() { $(this).data('isMouseDown', true); }).mouseup(function() { $(this).data('isMouseDown', false); }).mouseout(function() { if (!$(this).data('isMouseDown')) { $(this).hide(); } }); }); ```

      在这个JavaScript/jQuery示例中，当鼠标悬停时显示子div，并且只有在鼠标弹起且不在子div上时才隐藏它，这样就能保证点击时div不会消失。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部