2

I'd like to have an image rotate 180 degrees on hover. When the image is clicked/selected I'd like the image to remain in that position until it is selected again when it should return to its original position.

I've tried a combination of CSS which works fine for the hover but won't persist. I then found a few posts using jQuery but don't understand it enough to make the image return when selected again as the example I found was very basic.

The HTML

<div class="conversionFormE" id="switch1">
  <label class="swapHide">Swap?</label>
  <input type="button" class="rotate" id="switch" name="switch" value="" onclick="switchUnits()"/>
</div>

Some of the CSS

.rotate {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;

  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;

  overflow:hidden;
}

.rotate:hover {
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -o-transform:rotate(180deg);
}

Thanks for any help.

EDIT: onClick function as requested.

function switchUnits(){

//need to get values before swap to and from around.
var from = $("#from").val();
var to = $("#to").val();

//switches the details
$("#to #"+from).attr("selected","selected");
$("#from #"+to).attr("selected","selected");

//gets values after switch
from = $("#from").val();
to = $("#to").val();

//run convert
convertUnits();
}

EDIT: Would very much like for this to be achieved: Possible for image to rotate on hover again back to it's original position without the need for clicking it? so it would be:

in posA, hover, rotate, click, stay in posB. in posB, hover, rotate back, click, stay in posA again.

1
  • the onclick="switchUnits()" attribute points to a javascript function, you should include this function's code in your question.
    – mor
    Jul 15, 2013 at 21:28

2 Answers 2

4

You could just add a selector like .rotate.rotated to your css .rotate:hover. This way the styling will also get applied when there is an additional class rotated present.

Now you can add the following jQuery to toggle that class on click:

$('.rotate').click(function() {
    $(this).toggleClass('rotated');
});

And an example: http://jsfiddle.net/MZhG5/

8
  • Fiddle works perfectly but when I use the code it still doesn't 'stick' or stay once clicked?
    – null
    Jul 15, 2013 at 21:37
  • are you including jQuery? Do you get any errors in the console of your browser?
    – Pevara
    Jul 15, 2013 at 21:37
  • no errors at all, jquery is included but it does look like it's not being called?! Moved the function into the file that has the other functions in as I know that works an it didn't work there, then moved it into the main file and still no joy?!
    – null
    Jul 15, 2013 at 21:42
  • did you put it inside a $(document).ready block or similar, to ensure the DOM is ready? Does the rotated class get added after click when you inspect the code?
    – Pevara
    Jul 15, 2013 at 21:44
  • oops:) There's a chance I'm a bit of a newbie with jquery. I put it inside the document.ready and it works great! :) THanks!
    – null
    Jul 15, 2013 at 21:48
0

Try the following code:

var clicked = 0;
$(".rotate").click(function () {
   clicked++;
   if (clicked == 1) {
       $(this).addClass("stay");
   }
}).bind("mouseout", function () {
    if (clicked == 2) {
        $(this).removeClass("stay").addClass('normal');
        clicked = 0;
    }
});

The CSS:

.rotate:hover, .stay {
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}
.normal {
    -webkit-transform:rotate(0deg)!important;
    -moz-transform:rotate(0deg)!important;
    -o-transform:rotate(0deg)!important;
}

Example: http://jsfiddle.net/ScSHm/

3
  • Hi, It doesn't remain in position once clicked?
    – null
    Jul 15, 2013 at 21:33
  • My way is a little over complicated though. Compared to @PeterVR
    – Shawn31313
    Jul 15, 2013 at 21:41
  • Over complicated:) I'm new to jquery, eveyrthing is overcomplicated at the moment
    – null
    Jul 15, 2013 at 21:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.