我希望发生什么
我的链接有悬停效果。我怎样才能让它在点击/激活链接时保持效果？
然后，当您点击一个新链接时，我希望之前的悬停效果消失，直到再次点击。
我希望有人能够帮助解决这个问题，这样我就可以启动并运行我的网站:)
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 来做:
$('.site-navigation li a').click(function() {
$('.site-navigation li a').removeClass('active');
$(this).addClass('active');
});
然后只需定义与悬停类相同的.active类。
关于jquery - 链接处于事件状态时保持悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26514655/