jquery - 悬停 Action 后如何保存CSS样式

Question

在使用 jquery 和 css 实现菜单控件时，我遇到了以下问题:

Here is live demo I've created to show my current problem

例如，当我将鼠标悬停在'Menu Item 1' 上时，该元素已更改样式(background: white;)并且没问题，但是当我想穿过它的子项(子菜单项 1、子菜单项 2 等)菜单项 1 必须保持 背景:白色； 但它在我的示例中不起作用。

此外，当悬停在菜单项 2 上时，菜单项(菜单项 1)的先前样式应更改为默认样式。

有人知道怎么解决吗？

这是在链接失效的情况下来自 fiddle 的代码:

HTML

<ul id="jsddm">
    <li><a href="#">Menu Item 1</a>
        <ul>
            <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
            <li><a href="#">Sub Menu Item 3</a></li>
            <li><a href="#">Sub Menu Item 4</a></li>
        </ul>
    </li>
    <li><a href="#">Menu Item 2</a>
        <ul>
            <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
            <li><a href="#">Sub Menu Item 3</a></li>
            <li><a href="#">Sub Menu Item 4</a></li>
            <li><a href="#">Sub Menu Item 5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu Item 3</a>
        <ul>
            <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
            <li><a href="#">Sub Menu Item 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu Item 4</a></li>
</ul>​

脚本

var timeout = 200;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open() {
    jsddm_canceltimer();
    jsddm_close();
    ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');
}

function jsddm_close() {
    if (ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}

function jsddm_timer() {
    closetimer = window.setTimeout(jsddm_close, timeout);
}

function jsddm_canceltimer() {
    if (closetimer) {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

$(document).ready(function() {
    $('#jsddm > li').bind('mouseover', jsddm_open);
    $('#jsddm > li').bind('mouseout', jsddm_timer);
});

document.onclick = jsddm_close;​

CSS

/* menu styles */
#jsddm
{
    margin: 0;
    padding: 0;
    float: left;
    background: #4370b6;
    width: 100%;
}

#jsddm > li
{
    float: left;
    list-style: none;
    font: 12px Tahoma, Arial;
    background: #4370b6;
    padding: 0 5px;
}

#jsddm > li a
{
    display: block;
    padding: 0 15px;
    text-decoration: none;
    color: #FFF;
    white-space: nowrap;
    height: 62px;
    line-height: 60px;
}

#jsddm > li a:hover
{
    background: #FFF;
    color: #4370b6;
    padding: 0 15px;
    -moz-box-shadow: 0 3px 5px rgba(0,0,0,17);
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,17);
    box-shadow: 0 3px 5px rgba(0,0,0,17);
}

#jsddm li ul
{
    margin: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
}

#jsddm li ul li
{
    float: none;
    display: inline;
    width: auto;
    background: #0b0b0b;
    color: #FFF;
}

#jsddm li ul li a
{
    height: 40px;
    min-width: 240px;
    border-bottom: 1px solid #e9e9e9;
    -moz-box-shadow: 0 3px 5px rgba(0,0,0,17);
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,17);
    box-shadow: 0 3px 5px rgba(0,0,0,17);
    background: #FFF;
    color: #0b0b0b;
    text-align: left;
    line-height: 40px; /* IR Fix */
}

#jsddm li ul li a:hover
{
    /*background: #4370B6;
    color: #FFF;*/
}​

Answer 1

问题出在您的 CSS 中。你有以下声明:

#jsddm > li a:hover
{
    background: #FFF;
    color: #4370b6;
    padding: 0 15px;
    -moz-box-shadow: 0 3px 5px rgba(0,0,0,17);
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,17);
    box-shadow: 0 3px 5px rgba(0,0,0,17);
}

只需将其更改为:

#jsddm > li:hover > a, #jsddm > li:hover > ul a:hover
{
    background: #FFF;
    color: #4370b6;
    padding: 0 15px;
    -moz-box-shadow: 0 3px 5px rgba(0,0,0,17);
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,17);
    box-shadow: 0 3px 5px rgba(0,0,0,17);
}

而且有效。