1

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!

tkd_aj
  • 993
  • 1
  • 9
  • 16
  • 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 Nov 10 '14 at 21:24

2 Answers2

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.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • I have seen this solution a couple of times, and it seems it may be the only solution. I was hoping there would be general way to do it which would work with any element, and that I could get away with not having to recopy bootstrap's code to my own css class, but I don't think it cannot be avoided. Thank you for your answer! – tkd_aj Nov 10 '14 at 21:35
2

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>
Phil McCullick
  • 7,175
  • 2
  • 29
  • 29
  • I had to do `@extend .p-inputtext, :hover` becasuse i was getting the following error: ` SassError: compound selectors may no longer be extended. Consider `@extend .p-inputtext, :hover` instead.` See https://sass-lang.com/documentation/at-rules/extend#disallowed-selectors for details. – ilbonte Sep 22 '21 at 08:40