Hover 手机端的实现

起因：手机端没有hover特效，当你点击的时候就直接触发click.

如图：

强行使用hover在ipad 或者mobile留下hover, 直到下次点击才能取消。

解决：手机端有他特殊touch事件。touchstart，touchmove, touchend.（PS：电脑端没有的，PC使用mouseover和mouseout）

话不多说，上代码：

1.html页面

  

    Value:
  

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的形式。