Question

我有一个子菜单，当我将鼠标悬停在父列表上时，它会像预期的那样下降并且一切都在使用悬停颜色，但是当我回到父列表时它不会显示悬停颜色直到我我处于最顶层/几乎不在列表中......这是一个填充问题吗？

/* MENU */


 #gen_navigation {

float:right;
margin:0;
padding:0;


 }

#gen_navigation li a, #gen_navigation li {
float:left;
}

 #gen_navigation li {

list-style:none;
position:relative;

}

 #gen_navigation li a {
padding: 35px 20px 23px 20px;
text-decoration:none;
color:white;
border-right: 1px solid #3c3c3c;
border-left: 1px solid #333;
border-bottom: 1px solid #232323;
border-radius:3px;
}

 /* Sub-Menu */
 #gen_navigation li ul {
display:none;
position:absolute;
left:0;
top:100%;
margin:0;
padding:0;
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
  background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%,   #3c3c3c), to(#292929)); 

}

  #gen_navigation li:hover ul {
display:block;

}
#gen_navigation li ul li, #gen_navigation li ul li a {
float:none;
}


#gen_navigation li ul li a {
 width: 180px;
 display: block;
}

和html

 <ul id="gen_navigation">
            <li class="selected"><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>About</span></a>
                <ul>
                    <li><a href="#">Gate 5 Energy Partners</a></li>
                    <li><a href="#">Leadership</a></li>
                    <li><a href="#">Key Consultants & Strategic Partners</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Technology</span></a>
                <ul>
                    <li><a href="#">About SERT</a></li>
                    <li><a href="#">About the inventor</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Applications</span></a>
                <ul>
                    <li><a href="#">Agri-Business</a></li>
                    <li><a href="#">WasteWater Industry</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Benefits</span></a>
                <ul> 
                    <li><a href="#">Environmental Benefits</a></li>
                    <li><a href="#">Economic Benefits</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Inquiries</span></a></li>
        </ul>

Answer 1

好吧，我试图让你的代码正常工作，我得到了它，但现在我看到joholo将它整理出来了。不过，我想我已经解决了问题：通过使用jQuery parents()，我将“选定”类重新添加到您的<li>顶部。

Check this working example

顺便说一句：我认为你的.animate不起作用，所以我猜你试图使用jQuery-UI的effect。看看吧。

问候！

Answer 2

可能不是填充问题，在我看来更像是一个javascript事件处理程序问题。

父母仍然在javascript中悬停，即使你正在徘徊在其中一个孩子身上。因此，当你回到父母时，悬停不会为父母开火。

$('li').hover(function(){
    // 1. Parent gets onmouseover (hover) first time. Adds .selected on it's element.
    // 2. When mouse move from parent to child, removes .selected from parent, and adds to child.
    // 3. When back from child to parent, onmouseover (hover) on parent won't fire because it already (technically one of its children) already has onmouseover.
    $('li').removeClass('selected'); 
    $(this).addClass('selected').animate(bounce);        
});

如何以一种不错的方式解决它是一个不同的问题： - ）

css子菜单悬停问题

2 个答案: