Question

我正在angularjs中创建一个table pagination指令，我正在使用bootstrap按钮来显示页码。因为我正在制定这个指令用于工作并且可能与多个应用程序一起使用，所以我可以自定义它。因此，我的按钮上的所有类都绑定到我的作用域上的变量（基本上允许用户为每个按钮定义自己的类）。我的问题是，因为他们可以定义按钮的类，所以我不能为他们当前所在的页码类设置具体的颜色。因此，例如，如果他们点击第3页，我想要更改第3页，以便他们知道他们所在的页面。将鼠标悬停在每个引导按钮上时使用的颜色可以完美地工作，但仅在将鼠标悬停在它们上时应用。有没有办法强制当前页码显示用户选择的引导类的悬停属性？

我想在这里使用ng-class来应用悬停类（在paginatedTable.html中）：

<button title="Page {{pageNumber}}" type="button" class="{{cndBtnNumbersClass}}" ng-repeat="pageNumber in cndPageNumbers"
        ng-click="cndTablePaginationNav(pageNumber)">{{pageNumber}}</button>

这是一个有效的plnkr。如果您点击其中一个页码，它会在聚焦时应用该样式，但只要您点击它就不会显示选择了哪个页码。

http://plnkr.co/edit/CHO6HbT4emM3VEwcNnzq?p=preview

提前感谢您的帮助！

Answer 1

不，但你可以伪造它。

.something:hover, .something.hover {
   ...some style ...
}

然后只需切换hover CSS类，CSS就会像悬停一样。

Answer 2

由于Bootstrap使用Sass或Less，因此您只需在悬停时扩展悬停类即可。因此，在以下示例中，将鼠标悬停在卡上将在按钮上显示悬停状态。

.card:hover {
  .btn {
    @extend .btn-primary:hover;
  }
}

<div class="card card-body">
  <h5 class="card-title">Card title</h5>
  <button class="btn btn-primary">Click Me</button>
</div>

我可以强制元素显示其悬停效果吗？

2 个答案: