javascript - 不要删除悬停在菜单项上的事件类样式

Question

我有一个元素，不同的客户有自己的主题(保存在 sql 数据库中的 html 颜色代码)。一旦他们登录，我就会更改主题(菜单和页脚颜色)。因此主题本身保持一致，只有颜色发生变化。

在我的母版页中，我添加了一些 js 代码以根据谁登录来自动更改。悬停和移出菜单项工作正常。设置事件菜单项也有效，前提是您没有将鼠标悬停在事件菜单项上。如果您将鼠标悬停在事件菜单项上，样式将从事件菜单项中删除。

这是我所做的:

    $('.navigation').css({ "background": "#" + primaryColor });
        $('.navigation ul li a').css({ "color": "#" + primaryTextColor });

        $(".navigation ul li a").hover(function () {
            $(this).css({ "background": "#" + secondaryColor, "color": "#" + secondaryTextColor });
        }).mouseout(function () {
            $(this).css({ "background": "#" + primaryColor, "color": "#" + primaryTextColor });
        });

    id = (function () {
            return f = window.location.href.split('/').pop().split('.')[0];
        })

    $("#mi" + id()).css({ "background": "#" + secondaryColor, "color": "#" + secondaryTextColor });

菜单项是这样构建的:

    <div class="navigation">            
        <ul id="liHome" runat="server" >
            <li id="miDefault" ><a href="../Default.aspx">Home</a></li>
            <li id="miScanDocuments" ><a href="ScanDocuments.aspx">Scan Document</a></li>
            <li id="miViewDocument" ><a href="ViewDocument.aspx">View Document</a></li>
        </ul>
        <div class="cl">&nbsp;</div>
    </div>

我收集到在 mouseout 事件中删除了样式。如果当前页面是事件菜单项，有什么方法可以防止样式被删除？

Answer 1

您可以在 $(".navigation ul li a") 中使用 :not() CSS 伪类，这样 $(".navigation ul li a:(.current)") 当然你需要事先添加类，这样你就可以将你的 id 函数更新为 addClass of 'current' 作为你的第一个函数。 IE。仅绑定(bind)到您想要的元素，因此当您将鼠标悬停在当前菜单项上时它不会运行。