Этот простой фокус: не работают альтернативные сценарии с фрагментами или сценариями toggleClass

Question

В Wordpress (последняя версия) У меня есть изображение, которое я хочу повернуть, когда оно сфокусировано.Я пытался: фокус, но это не сработало.Также попробовал переключение классов в качестве альтернативы, но почему-то ни как не работает ...

1- Я дал класс 'Rotate45' этому изображению и записал этот CSS

.Rotate45 {
-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  outline: 0;
}

.Rotate45:focus {
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

Я не понимаюпочему это не работает ... если я заменил: focus на: active или просто удалил: focus в целом, он ведет себя как ожидалось, но почему-то не с: focus.Я также добавил атрибут tabindex | 1, но он ничего не исправляет.

2-Так как фокус: не работал, в качестве альтернативы я заменил первый экземпляр Rotate45 на Rotate, изменил класс изображения на Rotate,заменил Rotate45: фокус на Rotate45, затем добавил HTML-виджет со следующим кодом класса переключения

<script type="text/javascript">
$(".Rotate").click(function() {
  $(".Rotate").toggleClass("Rotate45");
});
</script>

И все же ничего, это расстраивает.Любая помощь будет высоко ценится Вот ссылка на тестовую страницу для справки.

PS: я новичок в коде и хотел бы изучить некоторые JS, PHP и JQuery

Answer 1

вы использовали : событие focus для css, которое используется, когда вы имеете дело с элементами управления вводом, вы должны использовать событие :hover, как показано ниже, нажмите на зеленый квадрат, и оно изменится

$(".Rotate").click(function() {
  $(".Rotate").toggleClass("Rotate45");
});

.Rotate45 {
-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  outline: 0;
}

.Rotate45:hover {
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color:red;
}
.Rotate{
  height:300px;
  width:300px;
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Rotate"></div>