javascript - 在悬停时旋转然后在单击时停留在该位置，再次单击时返回原始位置

Question

我想让图像在悬停时旋转 180 度。单击/选择图像时，我希望图像保持在该位置，直到再次选择它时应返回其原始位置。

我已经尝试了 CSS 的组合，它对悬停效果很好，但不会持续存在。然后我找到了一些使用 jQuery 的帖子，但我对它的理解还不足以让图像在再次选择时返回，因为我发现的示例非常基础。

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 函数。

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

编辑:非常希望实现这一点:图像可以在悬停时再次旋转回到原来的位置而不需要点击它吗？所以它会是:

在 posA 中，悬停、旋转、单击、停留在 posB 中。在 posB，悬停，向后旋转，点击，再次停留在 posA。

Answer 1

您可以在您的 css .rotate:hover 中添加一个像 .rotate.rotated 这样的选择器。这样，当存在附加类 rotated 时，样式也会得到应用。

现在您可以添加以下 jQuery 以在点击时切换该类:

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

还有一个例子:http://jsfiddle.net/MZhG5/