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，背景有关李2,3和4的变化翻过li 3，关于li 1,2和4变化的背景等等......

现在，我已经思考过漫长而艰难的事情，而且我非常肯定认为这可以用CSS完成，我需要看一下使用jquery，我是否正确？

提前致谢。
罗布

Answer 1

假设您的意思是非徘徊的li具有相同的背景：

的jQuery

这是一些应该运行的示例jquery代码。只需将“nav”类添加到<li> s

即可

$(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>。

Answer 2

是的，你是对的

Answer 3

正确。例如，使用以下HTML（假设您需要为每个元素设置不同的偏移量，从而为它们提供所有ID）：

<ul>
    <li id="foo">Item 1</li>
    <li id="bar">Item 2</li>
    <li id="baz">Item 3</li>
    <li id="yup">Item 4</li>
</ul>

你可以这样做：

$(document).ready( function() {
    $('#foo').mouseenter( function() {
        $('#foo').css( 'background-position-y', '20px' );
            ...
    })

    $('#foo').mouseleave( function() {
        $('#foo').css( 'background-position-y', '0px' );
        ...
    })
});

CSS背景位置a：悬停翻转，更改其他元素？

3 个答案:

的jQuery

CSS