我的学习记载

内容是转载的，但是转载源我忘了

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>

html代码

<div class="inner">
<a href="#">ontouchstart实现手机触屏中的hover效果,请在首页页面测试查看效果</a>
</div>