This simple focus: snippet or toggleClass script alternative are not working

Question

On Wordpress (latest version) I have this image I want to rotate when it's focused. I tried : focus but it did not work. Also tried class toggling as an alternative but somehow neither work...

1- I gave class ' Rotate45 ' to this image and wrote down this 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);
}

I don't understand why it does not work... if I replace :focus by :active or just remove :focus altogether it behaves as expected, but somehow not with :focus. I added attribute tabindex|1 as well but it fixes nothing.

2-As the focus: was not working, as an alternative, I replaced the first instance of Rotate45 by Rotate, changed the image class to Rotate, replaced Rotate45:focus by Rotate45, then added an HTML widget with the following toggleclass code

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

And still nothing, it's frustrating. Any help would be much appreciated Here is a link to the test page for reference.

PS: Am a total coding rookie and would like to learn some JS, PHP and JQuery

There is no element on the linked page with a `Rotate` or `Rotate45` class. Please provide a [MRE] _within your question_. — Turnip, Sep 26 '19 at 11:27
Link updated, did not realize a login was required for the previous link, sorry. — Golden Pony, Sep 26 '19 at 13:41

Dhaval Pankhaniya · Accepted Answer · 2019-09-26T11:44:39.580

0

you have used :focus event for css which is used when you are dealing with input controls, you should use :hover event like below, click on green square and it will transform

$(".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>

edited Sep 26 '19 at 11:44

answered Sep 26 '19 at 11:35

Dhaval Pankhaniya

1,996
1
15
26

thanks but the expected behavior is for it to rotate when after the element is clicked and if possible until the user clicks something else (hence me trying to use focus). The JS that switches the element class from non rotated to rotated does not work at all on the test site for some reason... – Golden Pony Sep 26 '19 at 13:21
To be clear, I think the problem with this snippet is that the JS snippet you provide (the same I used before) does not work on the test site for some reason – Golden Pony Sep 26 '19 at 13:40
you can still use focus but you have to use tabindex="1" attribute on div - https://stackoverflow.com/questions/39741709/css-focus-not-working – Dhaval Pankhaniya Sep 26 '19 at 14:13
I see thanks, I was trying to use that directly on the element not on the div before no wonder it did not work -_- !! that was very helpful – Golden Pony Sep 27 '19 at 12:28

This simple focus: snippet or toggleClass script alternative are not working

1 Answers1