Question

我正在尝试为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中永久添加类，然后在悬停等时删除它？

Answer 1

你太过分了。这听起来像是原生的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);
}

P.S - 请注意，您无需在单独的行中设置背景的位置。您可以将其作为background设置的一部分进行编写。

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

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

nav a:hover {
    background: #444;
    background-image: linear-gradient ....
    ....
}

Jquery删除然后在悬停时添加类两次（查看详细信息）

1 个答案: