javascript - 为什么 jquery 脚本会改变一些 css 样式？

Question

它必须是什么样子:带有下拉菜单的页面按钮应该以悬停效果打开。您将鼠标悬停在“页面”按钮上，将出现下拉菜单，该按钮应具有深色背景，与其他按钮“产品”和“博客”完全一样(这两个按钮在任何情况下都可以正常工作)。当您在下拉菜单中选择内容时，“页面”按钮仍然具有相同的样式(深色背景，就像悬停期间的最后两个按钮一样)。只有当光标离开下拉菜单或按钮时，下拉菜单才会消失，“页面”按钮应为白色背景。

上面的文字描述了按钮应该如何与 JavaScript 代码一起工作。 JS 代码实现了 hover 效果，但是在样式上做错了。

现在使用 JS 代码的“页面”按钮(当光标位于此按钮和下拉菜单上时)看起来像带有白色背景的事件按钮“主页”。我们需要解决这个问题，并像上面的描述那样制作按钮。

请查看 JSFiddle 以了解我在说什么。

如果您发现一些错误，请原谅我的英语:)

jsfiddle

HTML

<div class="menu">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active uppercase" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle uppercase  outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                aria-expanded="false">Pages</a>
            <div class="dropdown-menu dropdown-menu-right">
                <div class="wrapperForDropdomnUpArrow">
                    <div class="dropdownUpArrow">
                    </div>
                </div>
                <a class="dropdown-item uppercase aboutUs" href="#">About us</a>
                <a class="dropdown-item uppercase" href="#">Company</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link uppercase outline" href="#">Product</a>
        </li>
        <li class="nav-item">
            <a class="nav-link uppercase outline" href="#">Blog</a>
        </li>
    </ul>
</div>

CSS

.menu a:hover {
    color: #fff;
    background: #000;
    border-radius: 3px;
    transition: 0.4s;
}

.menu a {
    font-size: 12px;
    font-family: montserrat;
    color: #afb0b1;
    text-align: center;
    padding: 16px 19px;
    line-height: 12px;
    margin: 0px -5px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #f3f6f9;
    color: #000;
}

.dropdown-menu {
    background-color: #000;
    padding: 0px;
    border: 0;
    margin: 1px 0px 0px 0px;
}

.dropdown-menu a {
    text-align: left;
    padding: 12.5px 69px 12.5px 22px;
    line-height: 12px;
    margin: 0;
}

.dropdown-menu .aboutUs {
    text-align: left;
    padding: 20px 69px 12.5px 22px;
    line-height: 12px;
}

.dropdown-menu .FAQ {
    text-align: left;
    padding: 12.5px 69px 20px 22px;
    line-height: 12px;
}

a.nav-link.dropdown-toggle:focus {
    color: #fff;
    background: #000;
    border-radius: 3px;
}

jQuery

$(".dropdown-menu").css('margin-top', 0);
$(".dropdown")
    .mouseover(function () {
        $(this).addClass('show').attr('aria-expanded', "true");
        $(this).find('.dropdown-menu').addClass('show');
    })
    .mouseout(function () {
        $(this).removeClass('show').attr('aria-expanded', "false");
        $(this).find('.dropdown-menu').removeClass('show');
    });

我还发现删除这一行

    $( this ).addClass('show').attr('aria-expanded',"true");

做一些改变，但是删除这一行并不是完全解决

Before. We need to fix it

After

Answer 1

看来您的问题出在 bootstrap 及其 CSS 上。 看看这篇文章并尝试为您想要的颜色设置 Bootstrap 。 Bootstrap Button active color change

希望对您有所帮助!