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

您只需向{c} .rotate.rotated添加.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/

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

2 个答案: