HTML永久激活悬停和活动状态

Question

注意：我正在使用Angular，因此，如果Angular可以解决此问题，那么它也会起作用

我想建立一个页面，我可以在其中查看自己制作的样式。因此，我需要以某种方式激活悬停和活动状态。这是我的代码：

.myclass {
   background-color: blue
}

.myclass:disabled {
   background-color: red
}

.myclass:hover {
   background-color: green
}

.myclass:active {
   background-color: pink
}

<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass">Hover</button>
<button class="myclass">Active</button>

我希望有这样的东西：

<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass hover">Hover</button>
<button class="myclass active">Active</button>

或者：

<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass" hover="true">Hover</button>
<button class="myclass" active="true">Active</button>

Answer 1

这可以轻松完成，只需右键单击元素->检查元素->导航至样式选项卡中的类（在您的情况下为myClass）。 然后单击：hov并激活悬停，聚焦或活动（请参阅所附图片）

Answer 2

如果这是出于测试目的，请使用专用的悬停活动类。 给按钮一些虚拟类并设置按钮样式 完成后，将样式复制到：hover和：active状态 并删除虚拟代码。

没有其他解决方案。如果没有，我也想知道那种解决方案。

Divesh Panwar的答案是路要走。

Answer 3

用于开发： 只需介绍一个新的CSS类即可满足您的需求。 做就是了 myclass.hover，然后使用<button class="myclass hover" disabled="true">Disabled</button>，然后在样式设置完成后切换回：hover。

如果您使用的是chrome f.E.您可以按F12打开开发人员控制台。 在那里，您可以在右上方切换悬停状态。 有

用于测试： 如果确实要进行某种自动化测试，并且您确实需要悬停状态，那么我认为您是从错误的角度来解决问题，请使用硒或类似物来指导您朝正确的方向前进。