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.

4

2 回答 2

4

你可以在.rotate.rotated你的 css中添加一个选择器.rotate:hover。这样，当存在其他类时，样式也将被应用rotated。

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

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

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

于 2013-07-15T21:28:15.993 回答
0

试试下面的代码：

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/

于 2013-07-15T21:24:41.323 回答