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

Для разработки: просто представьте новый класс CSS, который делает то, что вам нужно.просто сделайте myclass.hover в css, затем <button class="myclass hover" disabled="true">Disabled</button> и переключитесь обратно: hover, когда закончите стилизацию или что-то еще.

Если вы используете chrome fE, вы можете нажать F12, чтобы открыть консоль разработчика.Там вы можете переключать состояние наведения в правом верхнем углу.Есть

Для тестирования: если это для каких-то автоматических тестов, и вам действительно нужно состояние наведения, я думаю, что вы подходите к проблеме с неправильной стороны, используйте селенили подобное, чтобы направить вас в правильном направлении.

Answer 2

Если это для целей тестирования, используйте специальный hover en active class. Дайте кнопкам несколько фиктивных классов и стилизуйте кнопки Когда вы закончите, скопируйте стиль в состояние: hover и: active и удалите фиктивный код.

Другого решения нет. Если он есть, я тоже хочу знать, что это за решение.

Ответ Дивеш Панвара - путь.

Answer 3

Это можно сделать легко, просто щелкните правой кнопкой мыши на элементе -> inspect element -> перейдите к классу (myClass в вашем случае) на вкладке стилей. Затем нажмите: hov и активируйте наведение, фокус или активную (см. Прикрепленное изображение)