我可以强制一个元素显示其悬停效果吗? [英] Can I force an element to display its hover effect?

问题描述

我正在 angularjs 中创建一个表格分页指令，并且我正在使用引导程序按钮来显示页码.由于我正在制定此指令以用于工作并可能与多个应用程序一起使用，因此我将其设为可定制的.因此，我按钮上的所有类都绑定到我作用域上的变量(基本上允许用户为每个按钮定义自己的类).我的问题是，由于他们可以定义按钮的类，因此我无法为它们当前所在的页码的类设置具体颜色.因此，例如，如果他们单击第 3 页，我希望更改第 3 页，以便他们知道自己在哪个页面上.当您将鼠标悬停在每个引导按钮上时使用的颜色可以完美地工作，但仅当您将鼠标悬停在它们上时才会应用.有没有办法强制当前页码显示用户选择的引导程序类的悬停属性?

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?

这里是我想使用 ng-class 来应用悬停类的地方(在 paginatedTable.html 中):

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>

这是一个有效的 plnkr.如果您单击其中一个页码，它会在聚焦时应用该样式，但是一旦您单击关闭，它就不会再显示选择了哪个页码.

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

在此先感谢您的帮助！

推荐答案

不，但你可以伪造它.

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

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

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

这篇关于我可以强制一个元素显示其悬停效果吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！