js ontouchstart实现手机触屏中的hover效果
发表于 2024年6月20日 17:35
返回列表<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>touchstart</title>
</head>
<body>
<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>
<script src="js/jquery.min.js"></script>
<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>
</body>
</html>鼠标过去按住不动会显示红色背景。
