链接处于活动状态时保持悬停效果答案

【问题标题】：Keep hover effect when link is active链接处于活动状态时保持悬停效果
【发布时间】：2015-03-04 05:43:41
【问题描述】：

我希望发生什么

我的链接有悬停效果。我怎样才能让它在点击/激活链接时保持效果？
然后，当你点击一个新链接时，我希望之前的悬停效果消失，直到再次点击。

我希望有人能够帮助解决这个问题，这样我就可以启动并运行我的网站:)

HTML

<body>
    <div id="wrapper">

        <div id="menu">


            <nav id="navigation" class="site-navigation" role="navigation">
                <ul class="menu">
                    <li class="menu-item"><a href="#">Home</a></li>
                    <li class="menu-item"><a href="#">Overvågning</a>
                        <ul class="dropdown">
                            <li class="menu-item sub-menu"><a href="proddigi.aspx">Digital</a></li>
                            <li class="menu-item sub-menu"><a href="prod-analog.aspx">Analog</a></li>

                        </ul>
                    </li>
                    <li class="menu-item"><a href="#">Alarm</a></li>
                    <li class="menu-item"><a href="#">Kontakt</a></li>

                </ul>
            </nav>
        </div>



        <form id="form1" runat="server">
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </form>
    </div>
</body>

CSS

body {
}
.site-navigation {
    display: block;
    font-family: 'Helvetica Neue LT Pro',Verdana;
    font-size: 13px;
}

    .site-navigation ul {
        background: #3498DB;
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

    .content-place
    {
       padding-top:400px;
    }

    .site-navigation li {
        color: #fff;
        background: #112d3b;
        display: block;
        float: left;
        margin: 0 0 0 0;
        padding: 25px 18px;
        position: relative;
        text-decoration: none;
        text-transform: uppercase;
    }
        /* texten i menuen*/
        .site-navigation li a {
            color: #fff;
            text-decoration: none;
            display: block;
            height: 33px;
            position: relative;
            display:table-cell;
            vertical-align:middle;
        }
        /* hover menuen - Det der sker når man holder musen over menuen */
        .site-navigation li:hover {
            @include transition(background, 0.2s);
            background: #1e495f; /* farve på hover*/
            cursor: pointer;
            border-bottom: 3px solid red;
        }

    .site-navigation ul li ul {
        background: #112d3b;
        visibility: hidden;
        float: left;
        width: 50px;
        position: absolute;
        transition: visibility 0.1s ease-in;
        margin-top: 25px;
        left: 0;
        z-index: 999;
    }

        .site-navigation ul li:hover > ul,
        .site-navigation ul li ul:hover {
            visibility: visible;
            z-index: 999;
        }
        /* Drop down Menuen */
        .site-navigation ul li ul li {
            clear: both;
            padding: 5px 0 5px 18px;
            width: 111px;
            height:auto;
            z-index: 999;



        }

            .site-navigation ul li ul li:hover {
                background: #1e495f;
                z-index: 999;
            }

【问题讨论】：

单击元素似乎正在导航到另一个页面...所以您希望该项目在该页面中处于活动状态..？

标签： jquery html css hover

【解决方案1】：

你可以像这样用 jQuery 做到这一点：

$('.site-navigation li a').click(function() {
    $('.site-navigation li a').removeClass('active');
    $(this).addClass('active');
});

然后只需将.active 类定义为与悬停类相同。

【讨论】：

首先，非常感谢您的帮助，但我不明白 :) - 为了让它发挥作用，我究竟需要做什么。因为我尝试了很多不同的东西，但它似乎根本不起作用:) 希望你能进一步提供帮助。
确保您已安装 jQuery 库。您可以通过在结束标记
另外加上：.site-navigation li.active { @include transition(background, 0.2s);背景：#1e495f； /* farve på hover*/ cursor: pointer;边框底部：3px 纯红色； }
它仍然不起作用，我所做的是以下内容：我添加了 .site-navigation li.active { @include transition(background, 0.2s);背景：#1e495f； /* farve på hover*/ cursor: pointer;边框底部：3px 纯红色； } 到 css

【解决方案2】：

我只需要更改类 .current 的颜色，然后它就可以顺利运行

【讨论】：