在悬停时旋转，然后单击时保持该位置，再次单击时返回到原始位置 [英] Rotate on hover then stay in that position when clicked, return to original position when clicked again

问题描述

我希望有一个图像旋转180度悬停。当图像被点击/选择时，我希望图像保持在那个位置，直到它应该返回到原始位置时再次被选择。

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.

我已经尝试了CSS的组合，它可以用于悬停，但不会持续。然后我发现了一些使用jQuery的帖子，但是不太明白它足够让我在再次选择图片时返回图片，因为我发现这个例子非常基本。

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.

HTML

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

一些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);
}

感谢您的任何帮助。

编辑：按要求编辑onClick函数。

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();
}

编辑：非常想达到这个目的：
可以让图像在悬停时再次旋转回到原始位置，而无需点击它？所以它会是：

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:

在posA中，悬停，旋转，点击，停留在posB。
在posB中，悬停，旋转回来，单击，再次停留在posA中。

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

推荐答案

像 .rotate.rotated 到你的css .rotate：hover 。这样，当有额外的类 rotate 存在时，样式也会被应用。

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.

现在您可以添加点击jQuery以切换该类：

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

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

例如： http://jsfiddle.net/MZhG5/

这篇关于在悬停时旋转，然后单击时保持该位置，再次单击时返回到原始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！