Jquery/CSS/HTML- 带有我已经拥有的 HTML 的滑动突出显示菜单 [关闭]

Question

我有这个 HTML：

 <nav>
        <div id="nav-show">
            <a class="m-btn rnd black mobile-hide" href="">Home</a>
            <a class="m-btn rnd black mobile-hide" href="">About</a>
            <a class="m-btn rnd black mobile-hide" href="">Projects</a>
            <a class="m-btn rnd black mobile-hide" href="">Quality</a>
            <a class="m-btn rnd black mobile-hide" href="">Products</a>
            <a class="m-btn rnd black mobile-hide" href="">Contact Us</a>
            <a class="m-btn rnd black mobile-hide" href="">Links</a>
        </div>

我怎么可能实现像this 这样的东西？ （我是JS菜鸟）

正如文章所说：

想法

这个想法是当您将鼠标悬停在导航中的不同链接上时，让某种高亮（背景或下划线）跟随您。这将发生在 jQuery 和它的动画能力上。因此，“魔术线”将仅通过 JavaScript 附加。添加到列表并设置样式后，当您将鼠标悬停在不同的链接上时，它会计算出左侧的位置和宽度以及要匹配的动画

由于各种因素，我真的不想更改 HTML。

我有jQuery等，需要兼容IE8。

我确实试过这个：Code here

哈雷

Answer 1

你需要做的只是一点点调整，

您正在实施的代码的问题主要是琐碎的错误，

您的标记有 id="nav-show"，但您的 js 使用的是 $(".nav-show")。

声明变量的方式存在语法错误，最佳实践（对于小型 js），在不同的行上定义每个新变量，

var $el;
var leftPos;
var newWidth;
var $mainNav = $("#nav-show");

为#magic-line 计算宽度的方式存在逻辑错误，因此，

这个

newWidth = $el.parent().width();

被替换为

newWidth = $el.width();

test link

Answer 2

你也可以在 css 的帮助下做到这一点

    .menu {
        position:fixed;
        top:142px;
        right:36px;
        float:right;
        height:50px;
        border-radius:10px;
        box-shadow:0px 0px 3px 0px #FFFFFF;
        background-image:url(../img/m3nuta8.png);
        }        
    .menu ul {
            margin:0px;
            padding:1px 1px 0px 1px;
            }
        .menu ul li {
            float: left;
            display:inline;
            padding:0px;
            border-right:thick #FFF;
            margin:0px;
            height:48px;
            }
        .menu ul li:hover {
            background-color:#3F3;
            box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05);
            }
        .menu ul li:first-child:hover {
            border-bottom-left-radius:10px;
            border-top-left-radius:10px;
            }
        .menu ul li:last-child:hover {
            border-bottom-right-radius:10px;
            border-top-right-radius:10px;
            }
        .menu ul li a {
            margin:inherit;
            alignment-adjust:central;
            float:right;
            font-family:Kreon, sans-serif;
            font-size:20px;
            color:#FFFFFF;
            text-decoration:none;
            padding:12px 15px 10px 15px;
            text-shadow:2px 2px 3px #000000;
            height:40px;
            }

这是html代码：

<div id="menu" class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Career</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">About Us</a></li>
    </ul>
</div>