-1

我有这个 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>

我怎么可能实现这样的事情？（我是 JS 菜鸟）

正如文章所说：

理念

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

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

我有 jQuery 等，它需要与 IE8 兼容。

我确实试过这个：代码在这里

哈雷

4

2 回答 2

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();

测试链接

于 2013-06-17T10:58:43.280 回答
0

好吧，你也可以在 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>
于 2013-06-17T10:25:01.443 回答