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 noob）

正如文章所说：

理念

当您将鼠标悬停在导航中的不同链接上时，我们的想法是让您有一种强调（背景或下划线）。这将发生在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>

Jquery / CSS / HTML-使用我已有的HTML滑动高亮菜单

2 个答案: