I am creating a table pagination directive in angularjs and I am using bootstrap buttons to display the page numbers. Since I am making this directive for work and to possibly be used with multiple apps I am making it customizable. So, all of the classes on my buttons are bound to variables on my scope (basically allowing the user to define their own class for each button). My problem is that since they can define the classes for the buttons, I can't set a concrete color for the class of the page number they are currently on. So, if they click on page 3, for example, I want page three to change so they know which page they are on. The colors which are used when you hover over each bootstrap button would work perfectly, but are only applied when you hover over them. Is there a way to force the current page number to display the hover properties of which bootstrap class the user chose?

Here is where I would like to use ng-class to apply the hover class (in the paginatedTable.html):

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

Here is a working plnkr. If you click on one of the page numbers it does apply the style while it is focused, but as soon as you click off it doesn't show which page number is chosen anymore.

Thank you in advance for any help!

I am creating a table pagination directive in angularjs and I am using bootstrap buttons to display the page numbers. Since I am making this directive for work and to possibly be used with multiple apps I am making it customizable. So, all of the classes on my buttons are bound to variables on my scope (basically allowing the user to define their own class for each button). My problem is that since they can define the classes for the buttons, I can't set a concrete color for the class of the page number they are currently on. So, if they click on page 3, for example, I want page three to change so they know which page they are on. The colors which are used when you hover over each bootstrap button would work perfectly, but are only applied when you hover over them. Is there a way to force the current page number to display the hover properties of which bootstrap class the user chose?

Here is where I would like to use ng-class to apply the hover class (in the paginatedTable.html):

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

Here is a working plnkr. If you click on one of the page numbers it does apply the style while it is focused, but as soon as you click off it doesn't show which page number is chosen anymore.

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

Thank you in advance for any help!

• javascript
• css
• angularjs
• twitter-bootstrap
• angularjs-directive

Share Improve this question Follow asked Nov 10, 2014 at 21:04 tkd_ajtkd_aj 1,06311 gold badge1010 silver badges1717 bronze badges 1

• Well you can attach an additional call to ng-click that sets a new class on the item that was clicked, as well as clearing out any previous class. A couple of jquery lines should be all it takes – Scott Commented Nov 10, 2014 at 21:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

No, but you can fake it.

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

Then just toggle the hover CSS class and the CSS will behave as if it were hovered.

Since Bootstrap uses Sass or Less, you can just extend the hover class on your over hover. So in the following example, hovering over the card will show the hover state on the button.

.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>