js的一个小问题

问答 / 194 / 5 / 创建于 2年前

图中圈出来的图片，当鼠标放到上面的手机图标是显示，但是移开就隐藏了，怎么实现鼠标可以往下移动，移到显示的图片也不会消失。

js代码：

$(document).ready(function(){
              $("#img_a").hover(function(){
                  $(".ul_a").css("display","block");
                  $(".ul_a").hover(function(){
                      $(".ul_a").hover(function(){
                          $(".ul_a").css("display","block");
                      },function(){
                          $(".ul_a").css("display","none");
                      });
                  });
              },function(){
                  $(".ul_a").css("display","none");
              });
          });

html代码：

<div>
                            <img id="img_a" src="/static/images/leve/log/log2.png">

                            <div class="ul_a">
                                <ul>
                                    <li >
                                    <img src="/static/images/leve/footer/footer_5.png">
                                    </li>
                                    <li>
                                        <span>联想智选APP</span>
                                        <span>下载即享</span>
                                        <span>999元新人礼</span>
                                    </li>
                                </ul>
                            </div>
                        </div>

怎么用hover显示div鼠标可以移入div里头不消失

12 声望

暂无个人描述~

《L01 基础入门》

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

《L02 从零构建论坛系统》

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

推荐文章：

更多推荐...

面试官问我：一个 TCP 连接可以发多少个 HTTP 请求？我竟然回答不上来 55 / 12 |

不务正业做了点前端事，uapp 一个能让uniapp离线打包更简单高效的脚手架 18 / 8 |

每天新增8640w数据，怎么存储比较好 21 / 50 |

redis应用系列二：异步消息队列：生产/消费模式实现及优化 14 / 4 |

Dcat Admin 修改全局行操作按钮显示方式为文字+图标 16 / 2 |

用Laravel 给孩子买纸尿裤 35 / 25 |

讨论数量: 5

Imuyu

课程读者 779 声望

img_a的hover改为父级元素

<div id="img_a">
    <img src="/static/images/leve/log/log2.png">  
    <div class="ul_a">
        <img src="/static/images/leve/footer/footer_5.png">   
    </div>
</div>

$(document).ready(function(){
    $("#img_a").hover(function(){
        $(this).find('.ul_a').css("display","block");
    },function(){
        $(this).find('.ul_a').css("display","none");
    });
});

2年前评论

PYA_24 （楼主）

大哥，还是一样的，除非把ul_a移动到img_a边上

Gxpro

课程读者 162 声望 / 搬砖工 @ USA

使用一个容器将其包裹住，在此容器上加上 js 监听即可，这样无论怎么移动，其实都是在父容器上

2年前评论

PYA_24 （楼主）

我想过这样做，但是移动到手机图标外面也会显示呀

PHP-Coder

@PYA_24 监听鼠标离开图片，隐藏显示图片的div，mouseleave，注意事件冒泡

PYA_24 （楼主）

@PHP-Coder 我最终还是选择加大父元素容器了

dashing

0 声望

你用来显示的容器可以大一些,然后真正的内容在这个容器里定个位就好

2年前评论

PYA_24 （楼主）

嗯，最终还是决定加大容器了

fffswhk

课程读者 197 声望

这种有时候不好改 dom 结构，可以加个延迟隐藏

$(document).ready(function(){
var timer = null
              $("#img_a").hover(function(){
                  if (timer) {
                      clearTimeout(timer)
                 }
                  $(".ul_a").css("display","block");
                  $(".ul_a").hover(function(){
                      clearTimeout(timer)
                  }, function() {
                      $(".ul_a").css("display","none");
                  });
              },function(){
                  setTimeout(function() {
                      $(".ul_a").css("display","none");
                 }, 300)
              });
          });

// 没做测试，可能会有问题。

2年前评论

PYA_24 （楼主）

我开始也是想用延迟，但是感觉逻辑说不出哪里有问题，就是不对的感觉

yaoxs

47 声望

给手机图标加上 div显示隐藏事件，div自己也加上显示隐藏事件。但这有个前提图标和div必须是连在一起的

2年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助