html - HTML永久激活悬停和事件状态

注意：我使用的是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>

最佳答案

只需在元素->检查元素->导航到样式选项卡中的类（在您的情况下为myClass）上，就可以轻松完成此操作。
然后单击：hov并激活悬停，聚焦或活动（请参阅附件中的图像）