Question

我有一个可以很好地切换的下拉子菜单。

当处于加载状态时，'nav ul li'的背景图像为'arrow-r.png' 当悬停和子菜单显示时，我想要背景图像而不是显示'arrow.png'

我附上了HTML，相关的CSS和jquery。

对于奖励积分，背景图像是否可以从一种状态旋转到另一种状态？

HTML：

<nav>
    <ul class="level0">
        <li><a href="#">Home</a>
            <ul">
                <li><a href="#">Account Details</a>
                <li><a href="#">Packages</a>
                <li><a href="#">Reference</a>
                <li><a href="#">Information</a>
                <li><a href="#">Registration</a>
            </ul>
        </li>
     </ul>
</nav>

CSS：

nav ul.level0 a {
background-image:url('images/arrow-r.png');
background-repeat:no-repeat;
}

最后（以及我怀疑问题的地方 - jQuery：

$(function () {
    $('nav li ul').hide().removeClass('fallback');
    $('nav li').hover(function () {
        $('nav ul.level0 > li > a').css('background-image','url(images/arrow.png');
        $('ul', this).stop().slideToggle(200);
    });
});

Answer 1

也许您发布的代码有误，或者发布的代码实际上与您的代码完全相同，而且您错过了类属性...

<nav>
    <ul class="level0">
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">Account Details</a>
                <li><a href="#">Packages</a>
                <li><a href="#">Reference</a>
                <li><a href="#">Information</a>
                <li><a href="#">Registration</a>
            </ul>
        </li>
     </ul>
</nav>

CSS：

nav ul.level0 > li > a {
    background-image:url('images/arrow.png');
    background-repeat:no-repeat;
}
nav ul.level0 > li > a:hover {
    background-image:url('images/arrow-r.png');
}
nav ul.level0 ul a {
    background-image:url('images/XXXX.png');
}

Answer 2

.hover()

.hover( handlerIn(eventObject), handlerOut(eventObject) )

您的代码

$(function () {
    $('nav li ul').hide().removeClass('fallback');
    $('nav li').hover(function () {
        $('nav ul.level0 > li > a').css('background-image','url(images/arrow.png');
        $('ul', this).stop().slideToggle(200);
    },function(){

    });
});

还要为您的ul

添加课程

<ul class="level0">

jquery悬停 - 更改背景

2 个答案: