如何在鼠标悬停后保存CSS样式

Question

在使用jQuery和CSS实现菜单控件时，我遇到了以下问题：

这是我创建的实时演示以展示我的当前问题

例如，当我将鼠标悬停在“菜单项1”上时，此项已更改样式（background: white;），这很好，但是当我想要穿过它的子项（子菜单项1、子菜单项2等）时，菜单项1必须保持background: white;，但在我的示例中无法正常工作。

此外，当鼠标悬停在菜单项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;*/
}​

- Pavlo

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);
}

并且它可以正常工作。

- Sven Bieder

Answer 2

更改

#jsddm > li a:hover

至

#jsddm > li:hover a

演示

- Zoltan Toth

---

当您以这种方式操作时，子菜单链接会失去悬停状态，并且始终为蓝色。 - Sven Bieder

谢谢Zoltan的快速回复，但正如Sven所说，子菜单链接会失去悬停状态，所以他的答案对我更可接受。 - Pavlo