ontouchstart實現手機觸屏中的hover效果

ontouchstart實現手機觸屏中的hover效果

最近一直都在做手機網站的項目，會經常遇到手機屏幕觸摸無交互效果，今天在一篇文章中看到模擬網頁端hover效果的例子拿出來和大家分享下，已經使用效果還不錯，大家可以根據下面的案例學下：

 

一、css樣式：

<style type="text/css">
.inner { width: 100%; height: 100px; position: relative; }
.inner a { background: #000; display: block; color: #fff }
.inner a.hover { background: red; -webkit-tap-highlight-color: rgba(255,0,0,0);/*取消默認手機點擊灰色框*/ }
</style>

 

二、js代碼

<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>//引用jquery框架

<script type="text/javascript">
 //請選引用jquery
 $(function () {
     $(".inner a").attr('ontouchstart', 'hover(this)');//hover效果
     $(".inner a").attr('ontouchend', 'mouseout(this)');//秒除hover
 })
 function mouseout(obj) {
  var className = "hover";
  var _ecname = obj.className;
  if (_ecname.length == 0) return;
  if (_ecname == className) {
   obj.className = "";return;
  }
  if (_ecname.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
   obj.className = _ecname.replace((new RegExp("(^|\\s)" + className + "(\\s|$)")), " ");
 }
 function hover(obj) {
  if (!obj) return;
  var className = "hover"
  var _ecname = obj.className;
  if (_ecname.length == 0) {
   obj.className = className;return;
  }
  if (_ecname == className || _ecname.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
   return;
  obj.className = _ecname + " " + className;
 }
</script>

三、頁面標籤代碼

<div class="inner">

<a href="#">ontouchstart實現手機觸屏中的hover效果,請在首頁頁面測試查看效果</a>

</div>