ipad.iphoneでcssホバー(hover)アニメーション
ipad.iphoneはマウスhoverの定義がないそうです。
ですからCSSでのhoverができません。
アニメーションなどはjqueryかjavascriptでするしかありません。
めんどくさいって言えばそうですし、重いって言えばそうです。
なのでCSSの方法を考えました。
その結果CSSで作ったアニメーションのボックスか親ボックスに
touchstartというイベントを追加します。
広告
$(function() {
$("ボックスID").bind({
touchstart: function () {
$(this).removeClass().addClass("空のクラス");
}
});
});
$(function() {
$("ボックスID").bind({
touchend: function () {
$(this).removeClass("空のクラス").addClass();
}
});
});
上のjavascriptを記載して
touchstartというイベントでclassを追加させます。
touchstartは押してる間を意味します。追加されるclassのCSSは何も書きません。
だたclassを追加させてipad.iphoneにコンテンツの動きがあったと認識させて
本来のCSSアニメーションを動かすしくみになってます。
これでhover時のcssアニメーションがオーケーです。
タグ
人気記事
