1

我目前在使用 .hover 选项使用 Jquery 实现下拉菜单时遇到问题。

问题是即使您将鼠标悬停在元素上，它有时也会消失。

JSFiddle 是http://jsfiddle.net/liamsorsby/dN3Tr/

但如果您希望在此处查看代码，则代码如下：

html

<div class="header_links">
        <ul>
            <li class="occasion_title occ">OCCASION
                <div class="occasions occ">
                    <ul class="occ">
                        <li><p>test</p></li>
                        <li><p>test</p></li>
                        <li><p>test</p></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>

jQuery

$(".occ").hover(
    function(){
        $(".occasions").css("display","inline");
    },
    function(){
        $(".occasions").css("display","none");
    });

CSS

.header_links{
float:left;
margin-left:12px;
}
.header_links ul{
padding:0px;
margin:0px;
}
.header_links li{
border:1px solid #C09356;
float:left;
list-style-type:none;
width:125px;
font-family:Arial;
position:relative;
color:#000000;
height:35px;
background-color:none;
}
.occasions{
display:none;
position:absolute;
margin-top:23px;
margin-left:-96px;
z-index:3000;
}
.occasions li{
border:1px solid #C09356;
height:25px;
width:110px;
background-color:#000000;
text-align:center;
}
.occasions p{
margin:3px 0 0 0;
padding:0px;
}

作为替代方法，我尝试使用 mouseover 和 mouseleave 但遇到了同样的问题。谁能建议如何改进此代码？先感谢您

4

2 回答 2

2

你需要瞄准occasion_title而不是occ达到你的要求。

只需更改此行：

$(".occ").hover

对此：

$(".occasion_title").hover

一个工作小提琴链接：http: //jsfiddle.net/dN3Tr/2/

于 2013-10-30T14:24:58.360 回答
1

如果你可以放弃 jQuery，你可以只使用 CSS 来做到这一点：

.occasion_title:hover .occasions {
    display: inline;
}
于 2013-10-30T14:29:54.630 回答