jquery - CSS 背景位置 a :hover rollover, 改变其他元素？

Question

您知道什么时候使用 CSS background-position 属性进行翻转，对吗？

滚动元素 1，a:hover 属性将背景更改为 position-x/y
滚动元素 2，a:hover 属性将背景更改为 position-x/y
等等。

这次我需要实现的是:

(假设我们有 4 个列表元素)

翻转 li 1，li 2、3 和 4 的背景发生变化。
翻转 li 2，li 2、3 和 4 的背景发生变化。
翻过里 3，里 1、2、4 的背景发生变化。
等等……

现在，我经过了漫长而艰苦的思考，我非常确定这不能用 CSS 完成，我需要考虑使用 jquery，我说得对吗？

提前致谢。
罗布

Answer 1

假设您的意思是非悬停 li背景相同:

jQuery

这里有一些应该可以工作的示例 jquery 代码。只需将类“nav”添加到 <li>

$(document).ready(function()
{
    $("li.nav").hover(
    function()
    {
        $("li.nav").css("background-image","url(newimage)");
        $(this).css("background-image","url(oldimage)");    
    },
    function()
    {
        $("li.nav").css("background-image","url(oldimage)");
    });
});

CSS

但是，可以使用 CSS:

HTML:

<ul class="nav">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

CSS:

ul.nav:hover li
{
    background-image: newimage;
}
ul.nav li:hover
{
    background-image: oldimage;
}

请记住，IE 仅支持 :hover在 <a>怪癖模式下的标签。