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>