利用ontouchstart实现手机触屏中的hover效果

2019独角兽企业重金招聘Python工程师标准>>>

                   <style>

                    #test li{ height:30px; line-height:30px; overflow:hidden;}

                    a.bb{ background:#ccc;color:#fff}

                    a.hover{color:#000; background:#fff; height:25px; line-height:25px; overflow:hidden;}

                    </style>

                    <script type="text/javascript">

                        //请选引用jquery

                        $(function () {

                            $('#test li a').each(function () {

                                $(this).attr('ontouchstart', 'hover(this)');//hover效果

                                $(this).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>

                    <ul id="test"><li><a href="">我答答二维码积分积分积分积分积分</a></li>

                    <li><a href="">我答答二维码积分积分积分积分积分积分积分</a></li>

                    <li><a href="" class="bb">我答答二维码积分积分积分积分积分积分积分</a></li>

                    <li><a href="">我答答二维码积分积分积分积分积分积分积分</a></li>

                    <li><a href="">我答答二维码积分积分积分积分积分积积分积分</a></li></ul>

转载于:https://my.oschina.net/u/564907/blog/149728