2

我正在尝试创建一个导航菜单，div当悬停在子li项上时会更改父背景。实际上，我只想移动父背景。

这是我的代码：

<div id="headerNav">
    <li class="navHome"><a href="index.php">Home</a></li>
    <li class="navServices"><a href="services.php">Services</a></li>
    <li class="navFaq"><a href="faq.php">FAQ</a></li>
    <li class="navGallery"><a href="gallery.php">Gallery</a></li>
    <li class="navContact"><a href="contact-us.php">Contact</a></li>
</div>

所以，我有#headerNav显示的默认背景。当您将鼠标悬停在服务上时，我想将#headerNav背景图像向上移动 75 像素。当您将鼠标悬停在常见问题解答上时，我想将#headerNav背景图像向上移动 150 像素等。

谁能帮我？

4

3 回答 3

3

考虑li元素是列表项，因此它的父级应该是例如ultag 而不是div。如果我们想象有效的 HTML 标记，您可以使用类似以下的内容来操作background-position父元素。我使用index()了不对逻辑进行硬编码的方法。

$("#headerNav > li").hover(function() {
    var pos = "0 -" + ($(this).index() * 75) + "px";
    $(this).parent().css("background-position", pos);
}, function() {
    $(this).parent().css("background-position", "0 0");
});

演示：http: //jsfiddle.net/rFhtP/

于 2012-05-27T11:59:23.400 回答
0

您可以通过在 li 上放置一个自定义属性来执行此操作，该属性确定要移动的像素数并在将鼠标悬停在项目上时使用 jquery，获取属性值然后访问它的父级以使用此属性设置它的背景位置，这种方式它将是可扩展的菜单和强大的

$("#headerNav li").hover(function() {
    $(this).parent().css("background-position", $(this).attr("CustomAttributeName"));
})
于 2012-05-27T12:01:11.057 回答
0

hover()jQuery 可以通过以下函数轻松做到这一点：

$("li").hover(function() {
    $(this.parentNode).addClass(this.className);
}, function() {
    $(this.parentNode).removeClass(this.className);
});

jsFiddle：http: //jsfiddle.net/Zy68z/

于 2012-05-27T12:02:24.130 回答