查看: 108  |  回复: 0
  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>

鼠标过去按住不动会显示红色背景。

您需要登录后才可以回帖 登录 | 立即注册
【本版规则】请勿发表违反国家法律的内容,否则会被冻结账号和删贴。
用户名: 立即注册
密码:
2020-2024 MaNongKu.com