Question

嘿，我以前遇到过这个问题，得到了解决但现在我的问题又回来了......复仇!!

我要做的是由列表项组成的导航，当您将鼠标悬停在其中一个项目上时，将显示另一个菜单，并且用户可以将鼠标悬停在这些项目上，如果用户悬停在任一菜单中列表然后第二个菜单显示：无

这是我的JQuery代码

<script>
    $(".galleryNavToggle").on("mouseenter mouseleave", function(event){
    var headNavGal = $("#headerNavGallery");
    if(event.type === "mouseenter"){
      headNavGal.show();
    }else if(event.type ==="mouseleave" &&
             ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
             $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
        headNavGal.hide();
    }
});
$("#headerNavGallery").on("mouseleave", function(event){
    var headNavGal = $(this);
    if(event.type ==="mouseleave"){
        headNavGal.hide();
    }
});

</script>

HTML：

<div class="headerNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="" class='galleryNavToggle'>Gallery</a></li>
<li><a href="" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</div><!--headerNavGallery-->




<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li><a href="#">William</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Artist Bio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--headerNavInfo-->

和我的CSS：

.headerNav{
    color:#FFF;
    padding-left:110px;
    padding-top: 18px;
    border:thin solid black;
    float:left;

}

.headerNav ul{
    list-style-type:none;
    margin:0;
    padding:0 0 0 8px;
}

.headerNav li{
    float:left;
}

.headerNav ul a{
    font-size:24px;
    color:#FFF;
    display:block;
    padding:0 55px 0 0;
    text-decoration:none;
    text-transform:capitalize;

}

.headerNav ul a:hover{
    color:#a40404;
    text-decoration:none;
}

.headerNavGallery{
    color:#000;
    padding-top:30px;
    padding-left:250px;
    float:left;
 border:thin solid black;
  margin-left:-1px;

}

.headerNavGallery ul{
    list-style-type:none;
    margin:0;
    padding:0 0 0 8px;
}

.headerNavGallery li{
    float:left;
}

.headerNavGallery ul a{
    font-size:24px;
    color:#000;
    display:block;
    padding:0 15px 0 0;
    text-decoration:none;
    text-transform:capitalize;

}

.headerNavGallery ul a:hover{
    color:#a40404;
    text-decoration:none;
}

.headerNavInfo{
    color:#000;
    padding-top:30px;
    padding-left:365px;
}

.headerNavInfo ul{
    list-style-type:none;
    margin:0;
    padding:0 0 0 8px;
}

.headerNavInfo li{
    float:left;
}

.headerNavInfo ul a{
    font-size:24px;
    color:#000;
    display:block;
    padding:0 15px 0 0;
    text-decoration:none;
    text-transform:capitalize;

}

.headerNavInfo ul a:hover{
    color:#a40404;
    text-decoration:none;
}

如果有人可以提供帮助那就太棒了......我相信问题会出现在JQuery中......我现在还在检查它：）

感谢您提前帮助。

Ĵ

菜单项悬停JavaScript第2部分

0 个答案: