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>