起因:手机端没有hover特效,当你点击的时候就直接触发click.
如图:
强行使用hover在ipad 或者mobile留下hover, 直到下次点击才能取消。
解决:手机端有他特殊touch事件。touchstart,touchmove, touchend.(PS:电脑端没有的,PC使用mouseover和mouseout)
话不多说,上代码:
1.html页面
<div class="pr-account-tab">
<div class="pr-account-tab_account-info_value">
<span class="pr-account-tab__account-value">Value:</span>
</div>
</div>
2.js(使用JQuery on)
//To solve PR-198
$(".pr-account-tab").on("touchstart", touchStart);
// $(".pr-account-tab").on("touchmove", touchMove);
$(".pr-account-tab").on("touchend", touchEnd);
$(".pr-account-tab").on("mouseover", touchStart);
$(".pr-account-tab").on("mouseout", touchEnd);
function touchStart(event) {
$(this).addClass("pr-account-tab-mobile");
}
// function touchMove(event) {
// // $("pr-account-tab-mobile").html("You are moving");
// // $(this).addClass("pr-account-tab-mobile");
// }
function touchEnd(event) {
$(this).removeClass("pr-account-tab-mobile");
}
另:js(不使用JQuery)
可以用事件监听取代:
document.getElementById("pr-account-tab-id").addEventListener("touchstart", touchStart, false);
document.getElementById("pr-account-tab-id").addEventListener("touchmove", touchMove, false);
document.getElementById("pr-account-tab-id").addEventListener("touchend", touchEnd, false);
注:用ID选择的,只能选择使用第一个元素。
3.css
.pr-account-tab-mobile {
background-color: green;
}
注:
我使用的是background-color,不是
&:hover {
background-color: @pr-account-tab--hover__bg-color;
}
使用hover的形式。