• mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法


    要实现的效果和代码思路

    简单来说就是 用一个div包着喇叭和悬浮框 悬浮事件写在这个div上 鼠标悬浮到div上的时候 悬浮框出现

    最终要做成鼠标从小喇叭移动到下面的框上的时候 下面框是不会消失的。

    遇到的问题

    遇到的问题是 当鼠标从喇叭移动到悬浮框上面的时候 鼠标移动到三角那个空隙的时候 下面的悬浮框就会消失

    解决办法有的人说 mouseleave的时候用timeout判断一下,如果移到下面那个悬浮框上了(判断是否移动到悬浮框,给悬浮框写mouseentered事件),就把隐藏逻辑停掉就行了,我试了下,很不好用

    出现问题的原因

    仔细想了想,其实用简单的css就可以解决。之所以遇到上面所说的问题是因为喇叭和悬浮框中间有空隙,因此鼠标移动到了这个空隙上的时候,就相当于焦点移开了包着喇叭和悬浮框的div。

    解决办法

    我们只要在这个悬浮框外面再套一个div(这个div的css样式只写位置不写背景色),这个div就会跟喇叭同级,让这个div和这个喇叭之间没有空隙,鼠标悬浮到喇叭上的时候,让这个div出现,自然这个div包着的有背景色的悬浮框也会出现了。只要这个div和这个喇叭之间没有空隙,那么鼠标从喇叭移动到下面的悬浮框的时候,就不会触碰到空隙,因而悬浮框就不会消失。

  • 相关阅读:
    UML系列图--用例图
    扩展方法
    POJ3254 Corn Fields(状压DP)
    POJ2836 Rectangular Covering(状压DP)
    POJ2817 WordStack(状压DP)
    POJ2441 Arrange the Bulls(状压DP)
    HDU2167 Pebbles(状压DP)
    HDU1561 The more, The Better(树形DP)
    POJ3659 Cell Phone Network(树上最小支配集:树型DP)
    UVa10917 A Walk Through the Forest(SPFA+记忆化搜索)
  • 原文地址:https://www.cnblogs.com/mabelstyle/p/3899244.html
Copyright © 2020-2023  润新知