虾仁A 2021-11-20 09:25 采纳率: 78.8%
浏览 97
已结题

如何解决小米导航栏下拉菜单选中问题

问题遇到的现象和发生背景

我的下拉菜单只能摸不能被选中(鼠标经过就显示,鼠标离开就隐藏,但是下拉菜单还没选中就隐藏了)

问题相关代码,请勿粘贴截图
 <div class="tounav w">
            <div class="tubiao"><img src="102小米商城网页模板下载/images/LOGO.png"></div>
            <!--   商品介绍栏STARTS         -->
            <div class="jiesao">
                <ul>
                    <li><a href="">Xiaomi手机</a></li>
                    <li><a href="">Redmi红米</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">平板</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
            <div class="xial">
                <div class="la w">
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                </div>   
            </div>
            <div class="xial">
                <div class="la w">
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                </div>   
            </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>

.tounav {
    display: flex;
    margin: 20px auto;
}

.tounav .tounav {
    flex: 20%;
}

.tubiao img {
    width: 55px;
    height: 55px;
    border-radius: 20px;
}

/* 商品介绍栏模块CSS */
.jiesao {
    flex: 50%;
}

.jiesao ul {
    width: 670px;

    height: 55px;
    margin-left: 200px;

    display: flex;

}

.jiesao ul li {
    position: relative;
}

.jiesao ul li a {

    font-size: 16px;
    color: #333;
    margin: 0 5px;
    text-align: center;
    line-height: 55px;
}

/* 小米商品下拉菜单CSS */
.xial {
    position: absolute;
    top: 130px;
    left: 0;
    width: 100%;
    display: none;
    height: 250px;
    border-bottom: 1px solid #F5F5F5;
    border-top: 1px solid #CCC;
    background-color: #FFFFFF;
    box-shadow: 0px 8px 10px rgba(0, 0, 0, .1);
    z-index: 20;
}

.la {
    height: 250px;
    display: flex;
    justify-content: space-around;
    margin: 10px auto;
}

.la div {
    flex: 1;
    text-align: center;
    width: 200px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 0;
    

}

.la div a {
    width: 160px;
    height: 110px;
    border-right: 1px solid #E0E0E0;
}

.la div a img {
    width: 100%;
    height: 100%;
}
.la span{
    font-size: 14px;
    margin: 20px 0px 5px 0px;
}
.la div p{
    color: #FF4500;
    font-size: 12px;
}

$(".jiesao li").on({
    mouseover:function(){
        var index =$(this).index()
        $(".xial").eq(index).stop().fadeIn("slow")
    },
    mouseout:function(){
        
        $(".xial").stop().fadeOut("slow")
    }
    
})

运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果

我想在鼠标离开导航栏下拉菜单也能显示只有移到其他内容区域下拉菜单才隐藏

  • 写回答

1条回答 默认 最新

  • 孙叫兽 前端领域优质创作者 2021-11-20 09:31
    关注

    控制你的js方法就行了,把除了内容区域的地方都加上鼠标进入和出去的效果

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 12月23日
  • 已采纳回答 12月15日
  • 修改了问题 11月20日
  • 创建了问题 11月20日

悬赏问题

  • ¥15 为什么视频算法现在全是动作识别?
  • ¥15 编写一段matlab代码
  • ¥15 用Python做岩石类别鉴定软件
  • ¥15 关于调取、提交更新数据库记录的问题
  • ¥15 之前删了盘从下vs2022遇见这个问题 搞了一整天了
  • ¥15 从Freecad中宏下载的DesignSPHysics,出现如下问题是什么原因导致的(语言-python)
  • ¥30 notepad++ 自定义代码补全提示
  • ¥15 MATLAB有限差分法解一维边值问题
  • ¥200 内网渗透测试 横向渗透 Windows漏洞 Windows权限维持
  • ¥15 数据结构图的相关代码实现