Question

我已经在这一天工作了一天左右，只是无法弄清楚需要发生什么。

我正在使用ng-repeat生成一个标签列表，该列表显示在一个简单的导航栏中。此导航栏与工作区相关。有许多工作区由所有者分配给他们的颜色，由{{ workspace.color }}访问。

我想要做的是设置:hover项的:active和<li>个状态，使背景颜色与工作区指定的颜色相匹配。

  <ul class="nav  nav-pills nav-justified" 
      style="border:2px solid {{workspace.color}}" >
  <li ng-repeat="page in pages" ng-class="{active:page.uri == uri,'last':$last}" 
    ng-style="{'border-right':'2px solid {{ workspace.color }}'}">

知道怎么做到这一点？我已经做了很多挖掘，我似乎无法找到任何提及ng-class或ng-style中的伪类的设置样式。

显然我可以访问.active类，但背景需要根据显示的项目进行更改，因此我无法在样式表中对值进行硬编码。

提前感谢您的帮助。

Answer 1

如何积极使用透明度？将ng-style移动到ul元素，然后对css执行类似的操作：

li {
  background-color: white;
}
li:hover {
  background-color: transparent; /*or inherit if transparent doesn't work well*/
}

据我所知，你希望当你悬停时该项目是工作区颜色，否则是白色（或其他东西）..？

或者，使用：not

将ng-style保留在li元素和样式上

li:not(:hover) {
  background-color: white;
}

如何在ng-repeat中将样式应用于活动/悬停状态

1 个答案: