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>
.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>
//请选引用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>
相关推荐
借助jQuery实现的简单CSS Hover效果 web,div+css,ui设计,网页设计,网站源码
插件描述:好看实用的CSS3的hover效果, 用transition 、amination 制造好看及实用的交互体验.参考示例:http://www.jq22.com/jquery-info5498
图标hover效果 图标hover效果
7种CSS3鼠标hover图片效果是一款基于magic.css来实现,可以制作出非常漂亮的鼠标hover图片效果。
莫要慌,实现方法有很大,今天懒人哥哥就教你一招如何用CSS3的伪类实现这个效果 关键在于CSS的伪类after中的content,它可以直接指定当前样式标签里的内容 废话不多说,仔细看代码你就懂啦(什么?你一点CSS基础...
一些基本的hover效果........................................................................................................
jquery实现的2款具有滑动效果的导航代码,鼠标移动可触发导航hover状态的滑动效果,兼容IE6和主流浏览器
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果。这组图片hover效果共16种特效。同时该特效也支持非Bootstrap版本。
这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。
jQuery+CSS3实现的遮罩图片hover翻转效果源码.zip
简单且实用的hover动画效果,本人使用的比较多,需要视情况取用。
html5 svg和css3合力打造的一款鼠标hover动画效果,共有3种效果,构思奇特,一起来见证奇迹吧!
主要介绍了小程序hover-class点击态效果实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
CSS3图片HOVER炫酷动画效果
这是一款CSS3鼠标hover动画效果。该鼠标hover动画效果用于展示人物信息,圆形的人物头像图片在鼠标hover时,会产生平滑的旋转动画效果,非常炫酷。
jquery图片hover放大效果.rar
css鼠标hover样式;最近整理初学css时留下的笔记翻出来很久以前的demo,有需要随意取用。实际用处可能不会很大,但是对于理解transition,线性渐变等属性有很直观的帮助
这是一款炫酷的鼠标hover按钮CSS3动画特效。该按钮CSS3动画特效包括10种鼠标hover效果。按钮动画的制作通过CSS3 transition和keyframes帧动画完成。