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

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

您可以将.rotate.rotated 之类的选择器添加到您的CSS .rotate:hover。这样，当存在额外的 rotated 类时，样式也会被应用。

现在您可以添加以下 jQuery 以在单击时切换该类：

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

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

Answer 2

试试下面的代码：

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

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

示例：http://jsfiddle.net/ScSHm/