0

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

当处于加载状态时，“nav ul li a”的背景图像为“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);
    });
});
4

2 回答 2

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');
}
于 2013-09-09T14:34:38.020 回答
0

。徘徊（）

.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">
于 2013-09-09T14:33:57.280 回答