Question

使用Angular 4和bootstrap。有一个Navbar，可以在之前创建一条线，并在悬停时使其可见。我很难让悬停样式在活动时停留。不确定：之前是如何影响它的。

.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

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

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

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

Answer 2

我能够做到这一点。

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

如何在悬停后保持我的悬停css活动？使用routerlink

2 个答案: