HTML activate hover & active states permanently

Question

NOTE: I am using Angular, so if Angular can solve this it will also work

I want to build a page where I can view the styles I am making. Therefore I need to somehow activate the hover and active states. Here is my code now:

.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 am hoping for something like this:

<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:

<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>

have a look at [this](https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover) — Sarthak Aggarwal, Mar 29 '19 at 06:23

score 0 · Answer 1 · answered Mar 29 '19 at 06:25

0

This can be done easily, just right click on the element -> inspect element -> navigate to the class (myClass in your case) in styles tab. Then click on :hov and activate the hover, focus or active (refer to the image attached)

answered Mar 29 '19 at 06:25

Divesh Panwar

141
4

Ok so this is almost perfect, expect from the fact that when I refresh my Angular app (after changing a css value) then I loose all these checkbox settings. On a screen with 20 buttons this is a big problem. – Paul Kruger Mar 29 '19 at 06:50

score 0 · Answer 2 · answered Mar 29 '19 at 13:29

If this is for testing purposes use a dedicated hover en active class. Give the buttons some dummy classes and style the buttons When you are finished copy the style to the :hover and :active state and delete the dummy code.

There is no other solution. If there is one than I also want to know what that solution is.

The answer of Divesh Panwar is the way to go.

score -1 · Answer 3 · answered Mar 29 '19 at 06:32

For development: Just introduce a new css class that does what you need. just do myclass.hover in css then <button class="myclass hover" disabled="true">Disabled</button> and switch back to :hover when finished styling or whatever.

If you use chrome f.E. you can press F12 to open developer console. There you can toggle the hover state in the top right. There

For testing: If it's for some kind of automated tests, and you realy need the hover state, i gues you approach the problem from the wrong side, use a selenium or similar to guide you in the right direction.

Thanks for your answer, but I really need to display the `:hover` state. Making a `.hover` class is kind of pointless, then I can just make all the classes I need. But thanks :) — Paul Kruger, Mar 29 '19 at 06:43

HTML activate hover & active states permanently

3 Answers3