NOTE: My project utilizes Angular, so Angular may offer a solution to this issue as well
I am in the process of creating a page where I can preview and test out various styles that I have designed. In order to achieve this, I need to somehow activate both the hover and active states on elements. The current code snippet I am working with is displayed below:
.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>
I envision the final result looking something like one of these examples:
<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass hover">Hover</button>
<button class="myclass active">Active</button>
Or possibly like this:
<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>