导航悬停效果 - 滑动：将背景从一个元素悬停到另一个元素

Question

我已经搜索了谷歌和stackoverflow这项技术，但我不知所措。

<ul class="nav">
    <li><a class="active" href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Contact</a></li>
</ul>

活动页面将有一个css背景/类，当我将鼠标悬停在其中时，我想将该背景滑动到导航中的任何元素。每当光标在nav元素上时，它都会创建一个悬停状态。

思想？

Answer 1

赞this？

只需几分钟就把它掀起，但我认为它足够接近

<强> JS

$("#navMenuBackground").height = $(".navItems").outerHeight();

$(".navItems").mouseover(function () {
    $("#slideMe").stop();
    var width = $(this).outerWidth();
    var height = $(this).outerHeight();
    var left = $(this).position().left;
    var top = $(this).position().top;
    $("#slideMe").animate({
        left: left,
        top: top,
        width: width,
        height: height
    }, 200);
});