0

我正在尝试为 HTML 模板构建导航栏。

导航栏在具有“drop”类的链接的右侧有一个箭头。jQuery 有一行代码，如果它有“drop”类，那么它addClass用来添加一个背景箭头，当链接没有悬停时，它会停留在那里。现在看代码：

HTML：

<nav>
    <a href="index.html" class="first">Home</a>
    <a href="about.html" class="drop">About Us</a>
    <a href="javascript:void(0);" class="drop">Other</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="http://forcefire.us/">Web Hosting</a>
    <a href="contact.html">Contact Us</a>
    <a href="javascript:void(0);" class="last">&nbsp;</a>
</nav>

CSS：

nav {
    background: #333;
    border-radius: 6px;
    border-top: 1px solid #222;
    border-bottom: 1px solid #444;
}

nav a {
    padding: 15px 15px;
    display: inline-block;
    color: #888;
    font: bold 14px Sansation;
    font-weight: bold;
    text-decoration: none;
    margin: 0 -4px 0 0;
    border-left: 1px solid #444;
    border-right: 1px solid #222;
}

nav a:hover {
    background: #444;
background-image: linear-gradient(bottom, rgb(68,68,68) 0%, rgb(85,85,85) 100%);
background-image: -o-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(85,85,85) 100%);
background-image: -moz-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(85,85,85) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(85,85,85) 100%);
background-image: -ms-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(85,85,85) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(68,68,68)), color-stop(1, rgb(85,85,85)));
}
    nav .drop {
        padding-right: 20px;
    }
    nav .drop-d {
        background: url(../images/nad.png) no-repeat;
        background-position: 94% 50%;
    }
    nav .drop-u {
        background: url(../images/nau.png) no-repeat;
        background-position: 94% 50%;
    }

jQuery：

$(document).ready(function() {
// Navigation Script
    $('nav .drop').addClass('drop-d');
    $('nav .drop').hover(
        function() {
            $(this).removeClass('drop-d').addClass('drop-u');
        }, function () {
            $(this).removeClass('drop-u').addClass('drop-d');
        }
    );
});

现在，仅添加类 'drop-d' 的第一行显示了箭头。但这不是问题。

该.hover()函数删除类'drop-d'，但它不会在悬停时添加类'drop-u'。关闭悬停（它是否删除了“drop-u”类，我不知道），但它再次添加了“drop-d”类。

如果很明显，我很抱歉，但已经晚了。无论如何，除了在 CSS 中永久添加类然后在悬停时删除它等等之外，有什么问题以及更好的编写方法是什么？

4

1 回答 1

0

你做的太过分了。这听起来像原生的 CSS :hover行为。

使用这个 CSS 而不是你的 CSS + JS：

nav .drop {
    padding-right: 20px;
    background: url(../images/nad.png) 94% 50% no-repeat;
}
nav .drop:hover {
    background-image: url(../images/nau.png);
}

PS - 请注意，您不需要将背景的位置设置在单独的行中。您可以将其写为background设置的一部分。

至于“nau.png”没有显示问题。

您有以下类，它可能与其他设置发生冲突，因为它们适用于相同的元素。

nav a:hover {
    background: #444;
    background-image: linear-gradient ....
    ....
}
于 2013-08-30T04:48:03.640 回答