mouseleave mouseout時候懸浮框不該該消失的時候消失了 css 解決辦法

要實現的效果和代碼思路

簡單來講就是 用一個div包着喇叭和懸浮框 懸浮事件寫在這個div上 鼠標懸浮到div上的時候 懸浮框出現

最終要作成鼠標從小喇叭移動到下面的框上的時候 下面框是不會消失的。

遇到的問題

遇到的問題是 當鼠標從喇叭移動到懸浮框上面的時候 鼠標移動到三角那個空隙的時候 下面的懸浮框就會消失

解決辦法有的人說 mouseleave的時候用timeout判斷一下，若是移到下面那個懸浮框上了（判斷是否移動到懸浮框，給懸浮框寫mouseentered事件），就把隱藏邏輯停掉就好了，我試了下，很很差用

出現問題的緣由

仔細想了想，其實用簡單的css就能夠解決。之因此遇到上面所說的問題是由於喇叭和懸浮框中間有空隙，所以鼠標移動到了這個空隙上的時候，就至關於焦點移開了包着喇叭和懸浮框的div。

解決辦法

咱們只要在這個懸浮框外面再套一個div（這個div的css樣式只寫位置不寫背景色），這個div就會跟喇叭同級，讓這個div和這個喇叭之間沒有空隙，鼠標懸浮到喇叭上的時候，讓這個div出現，天然這個div包着的有背景色的懸浮框也會出現了。只要這個div和這個喇叭之間沒有空隙，那麼鼠標從喇叭移動到下面的懸浮框的時候，就不會觸碰到空隙，於是懸浮框就不會消失。