html - 悬停后如何保持悬停css处于活动状态？使用路由器链接

Question

使用 Angular 4 和引导程序。有一个导航栏，它在之前创建一条线并使其在悬停时可见。我很难让悬停样式在它处于活动状态时保持不变。不确定 :before 是如何影响它的。

.navbar-inverse .navbar-nav>li>a:before{
 content: "";
 position: absolute;
 width: 100%;
 height: 2px;
 bottom: 0;
 left: 0;
 background-color: #fff;
 visibility: hidden;
 -webkit-transform: scaleX(0);
 transform: scaleX(0);
 -webkit-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}

.navbar-inverse .navbar-nav>li>a:hover:before{
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

在导航中使用此激活的当前活动样式：[routerLinkActive]="['active']"

.navbar-inverse .navbar-nav>.active>a {
  font-size: 17px;
  background-color: #0B9788 !important;
  border-radius: 2px;
}

Answer 1

我能够做到这一点。

.navbar-inverse .navbar-nav>.active>a:before {
 visibility: visible;
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
}

Answer 2

在这种情况下，您可以使用 JavaScript 代码。您可以使用以下代码：

document.getElementById('some-id').onmouseover = function() {
    this.style.backgroundColor = "#0B9788"
}

您可以在此处查看此代码：https ://jsfiddle.net/tk7p2br5/2/