jquery - 当 li 悬停或活动时更改 ul 背景

Question

我正在研究这个新的 wordpress 主题，现在我有以下问题。如果你看这里：http ://www.client-szs.nl/fatih你会看到主菜单。如果我单击或悬停在博客上，我希望 ul 背景发生变化并一直移动到博客一词。这也适用于菜单中的其他项目。所以每个 li 都有不同的 ul 背景位置。

Answer 1

你可以用 jquery 来做这个：

$('li').hover(function() { //mouseover
     $('ul').css('background', '#000');
}, function() { //mouseout
     $('ul').css('background', '#fff');
});

Obs：代码未经测试。

Answer 2

更简单的方法，如果你喜欢，只使用 css，见 DEMO http://jsfiddle.net/yeyene/DZRUu/

使用这些 css，您的活动菜单将像在 DEMO 中一样更改。

.mainnav ul {
    background:#D11F28;
    background-position: -730px 0px;
    background-repeat: no-repeat;
    border: 0px solid;
    min-height: 48px;
    margin: 0px;
    padding: 0px 8px 0px 8px;
    width:100%;   
}
.mainnav ul li {
    font-family: 'Rokkitt', serif;
    display: inline-block;
    list-style-type: none;
    font-size: 23px;
    line-height: 30px;
    padding:9px 5px;
    width: auto;
    margin-right: 3%;   
}
.mainnav ul li a{
    text-decoration:none;
    color:#fff;      
}
.mainnav ul li.current_page_item a{
    text-decoration:none;
    color:#D11F28;    
}
.mainnav ul li.current_page_item{
    background:#F2F2F2;    
}