3

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

这是我创建的现场演示，以展示我当前的问题

例如，当我将鼠标悬停在“菜单项 1”上时，该项目的样式已更改background: white;（但在我的示例中不起作用。 background: white;

此外，当将鼠标悬停在Menu Item 2上时，应将以前的菜单项样式（Menu Item 1）更改为默认样式。

有谁知道如何解决这个问题？

在链接腐烂的情况下，这是小提琴中的代码：

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;*/
}​
4

2 回答 2

3

问题出在你的 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);
}

它有效。

于 2012-12-26T15:42:17.630 回答
1

改变

#jsddm > li a:hover

到

#jsddm > li:hover a

演示

于 2012-12-26T15:39:09.423 回答