如何在单击然后将鼠标悬停在链接后保持带下划线

Question

在我的 Javascript 中，我有一个功能，点击时会在标题导航栏上为链接添加下划线：

$(".navbar-inverse .navbar-nav > li > a").click(function() {        
          $(".navbar-inverse .navbar-nav > li > a").removeClass("active"); 
          $(this).addClass("active");          
});

.active { 
      text-decoration: underline; 
} 

但是在点击链接并悬停后，由于以下 CSS，下划线会消失，并且链接会像往常一样改变颜色：

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
                            color: red; /* flash */  
 }

我尝试通过添加 text-decoration: underline; 来解决这个问题到上面的 CSS，但是当链接悬停在上面时，这会导致始终出现下划线。因此，我将如何使用 jQuery 来像上面那样在活动链接上加下划线，1. 防止在单击的链接悬停在 2. 后下划线消失。（真的类似于 1）防止链接在之后改变颜色单击并悬停在上方。

编辑（看起来应该做的事情，谢谢@amol）：

$(".navbar-inverse .navbar-nav > li > a ").click(function() {        
      $(".navbar-inverse .navbar-nav > li > a ").removeClass("active"); 
      $(this).addClass("active");          
});

.navbar-inverse .navbar-nav > li > a {
      color: #ffffff /* text color default */;
}

.navbar-inverse .navbar-nav > li > a.active,
.navbar-inverse .navbar-nav > li > a.active:hover,
.navbar-inverse .navbar-nav > li > a.active:focus{
      color: #ffffff;
      text-decoration: underline;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
      color: red; /* flash */
}

.active { 
      text-decoration: underline; 
} 

Answer 1

可能你忘记添加你的 ul

.navbar-inverse .navbar-nav > ul > li > a:hover, .navbar-inverse .navbar-nav > ul > li > a:focus {
    color: red;
    text-decoration:underline;
}

查看示例：http://jsfiddle.net/5SAv5/

Answer 2

试试这个代码

$(".navbar-inverse .navbar-nav > ul > li > a").click(function() {        
          $(".navbar-inverse .navbar-nav > ul > li > a").removeClass("active"); 
          $(this).addClass("active");          
});

查看Demo