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

Nav hover effect - Sliding the :hover background from one element to another

本文关键字：元素 悬停 一个 另一个 背景 导航      更新时间：2023-09-26

我已经在google和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背景/类，我想滑动的背景在导航中的任何元素，当我悬停到它。当光标移到导航元素上时，它将创建一个悬停状态。

想法吗?

像这样?

几分钟就做好了，不过我觉得差不多了

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);
});
相关文章：