Question

我正在尝试创建一个导航菜单，当将鼠标悬停在子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背景图片75px。当您将鼠标悬停在常见问题解答后，我想将#headerNav背景图片向上移动150px等等。

任何人都可以帮助我吗？

Answer 1

考虑li元素是列表项，因此其父元素应为例如ul代码，但不是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");
});

DEMO： http://jsfiddle.net/rFhtP/

Answer 2

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

$("#headerNav li").hover(function() {
    $(this).parent().css("background-position", $(this).attr("CustomAttributeName"));
})

Answer 3

jQuery可以使用hover()函数轻松完成此任务：

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

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

在子鼠标悬停时更改父元素背景位置

3 个答案: