onmouseover 反应慢一闪就过去是为啥？_html/css

집

웹 프론트엔드

HTML 튜토리얼

onmouseover 反应慢一闪就过去是为啥？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:46 AM

jquery color class

先附上代码

<table  width="100%" border="0" cellspacing="1" cellpadding="0"  >                                <tr height="27" align="center" style="color:#fff;">                                        <td width="17%" height="35" bgcolor="#19283e"        class="th01">a</td>                                        <td width="33%" height="35" bgcolor="#19283e" class="th01">b</td>                                        <td width="10%" height="35" bgcolor="#19283e" class="th01">c</td>                                        <td width="33%" height="35" bgcolor="#19283e" class="th01">d</td>                                        <td width="8%" height="35" bgcolor="#19283e" class="th01">e</td>                                </tr>                                <tr>                                        <td colspan="7" height="25" align="left" >                                                <table height="26" width="100%" cellspacing="0" cellpadding="0" style="margin-top:10px; background:url(/images/main/img09.gif);">                                                        <tr>                                                                <td style="padding-left:8px;" width="21"><img  align='absmiddle' src='/UpFile/League/Icon_51001627082010.jpg'    style="max-width:90%"  style="max-width:90%"/ alt="onmouseover 反应慢 一闪就过去 是为啥？_html/css_WEB-ITnose" ></td>                                                                <td style="padding-left:7px;" class="txt09">a--- D1</td>                                                        </tr>                                                  </table>                                        </td>                                  </tr>                                            <tr>                                <!--        <td colspan="5" align="center" class="txt10" style="padding-left:4px;">                    <table width="100%" id="box-table-a">                    <tr>-->                                        <td  align="center" style="padding-left:4px;">09/29 11:00</td>                                        <td  align="center"  id="id1_415520" class="list_td"  onclick="addCart('ggu12',415520,1,'SMP','2013-09-29 11:00/sh:ke/SMP');"  onMouseover="highlight(this, true);" onMouseOut="highlight(this, false);" >                                <span style="float:left;">sh</span>                                <span style="float:right;">205</span></td>                                        <td  align="center" id="id0_415520"         onMouseover="highlight(this, true);" onMouseOut="highlight(this, false);"                                         class="list_td"        onclick="addCart('ggu12','415520',0,'SMP','2013-09-29 11:00/sh:ke/SMP');"        >                                320                                                                        </td>                                        <td  class="list_td" id="id2_415520" class="list_td" onclick="addCart('ggu12',415520,2,'SMP','2013-09-29 11:00/sh:ke/SMP');" onMouseOver="highlight(this, true);" onMouseOut="highlight(this, false);"><span style="float:left;">3030</span><span style="float:right;">ke</span></td>                                        <td  align="center"  style="background-color:#2b2b2b; cursor:arow;"><font color="#FFCC00">ppl</font></td>                        <!--        </tr>                                </table>                                </td>-->                        </tr></table><sript>function highlight(obj, isHover) {        var cssClass = obj.className;        //alert(cssClass);        if(cssClass == "" || cssClass == "MouseOver") {                obj.className = isHover ? "MouseOver" : "";                return;    }    var color = "#000000";    var oddColor = "#000000";                        if(isHover) {                //obj.style.backgroundImage = "url(/images/main/bg19.gif)";                //alert(cssClass);                obj.style.backgroundColor = "#FFCC00";                obj.style.borderColor = "#ffe066 #907608 #907608 #ffe066";        } else {            color = "";            oddColor = "";                obj.style.backgroundColor = "";                obj.style.borderColor = "";                //obj.style.backgroundImage = "url(/images/main/bg09.gif)";    }        obj.style.color = color;                                         // set color of this element        var tds = obj.getElementsByTagName("TD");        // and all child TDs        for (var i = 0; i < tds.length; i++) {            if (tds[i].className == "odd") {                        tds[i].style.color = color;            } else {                tds[i].style.color = color;            }        }                }</script>

以上代码里 tr是循环出来的。我附上的是其中一个table的数据

问题是td里的 onmouseover/out 效果反应慢鼠标上去了有的不会变效果在一个 td里来回一下才出现效果有时还是一闪就没了。不知道是什么原因。有没有人知道？困惑了 2天在不行高手请求以上代码改为 jquery的也行 jquery 替代 onmouseover 效果。

回复讨论(解决方案)

<table  width="100%" border="0" cellspacing="1" cellpadding="0"  >                                <tr height="27" align="center" style="color:#fff;">                                        <td width="17%" height="35" bgcolor="#19283e"        class="th01">a</td>                                        <td width="33%" height="35" bgcolor="#19283e" class="th01">b</td>                                        <td width="10%" height="35" bgcolor="#19283e" class="th01">c</td>                                        <td width="33%" height="35" bgcolor="#19283e" class="th01">d</td>                                        <td width="8%" height="35" bgcolor="#19283e" class="th01">e</td>                                </tr>                                <tr>                                        <td colspan="7" height="25" align="left" >                                                <table height="26" width="100%" cellspacing="0" cellpadding="0" style="margin-top:10px; background:url(/images/main/img09.gif);">                                                        <tr>                                                                <td style="padding-left:8px;" width="21"><img  align='absmiddle' src='/UpFile/League/Icon_51001627082010.jpg'    style="max-width:90%"  style="max-width:90%"/ alt="onmouseover 反应慢 一闪就过去 是为啥？_html/css_WEB-ITnose" ></td>                                                                <td style="padding-left:7px;" class="txt09">a--- D1</td>                                                        </tr>                                                  </table>                                        </td>                                  </tr>                                            <tr>                                <!--        <td colspan="5" align="center" class="txt10" style="padding-left:4px;">                    <table width="100%" id="box-table-a">                    <tr>-->                                        <td  align="center" style="padding-left:4px;">09/29 11:00</td>                                        <td  align="center"  id="id1_415520" class="list_td"  onclick="addCart('ggu12',415520,1,'SMP','2013-09-29 11:00/sh:ke/SMP');"  onMouseover="highlight(this, true);" onMouseOut="highlight(this, false);" >                                <span style="float:left;">sh</span>                                <span style="float:right;">205</span></td>                                        <td  align="center" id="id0_415520"         onMouseover="highlight(this, true);" onMouseOut="highlight(this, false);"                                         class="list_td"        onclick="addCart('ggu12','415520',0,'SMP','2013-09-29 11:00/sh:ke/SMP');"        >                                320                                                                        </td>                                        <td  class="list_td" id="id2_415520" class="list_td" onclick="addCart('ggu12',415520,2,'SMP','2013-09-29 11:00/sh:ke/SMP');" onMouseOver="highlight(this, true);" onMouseOut="highlight(this, false);"><span style="float:left;">3030</span><span style="float:right;">ke</span></td>                                        <td  align="center"  style="background-color:#2b2b2b; cursor:arow;"><font color="#FFCC00">ppl</font></td>                        <!--        </tr>                                </table>                                </td>-->                        </tr></table><script tepe="javascrit/text">function highlight(obj, isHover) {        var cssClass = obj.className;        //alert(cssClass);        if(cssClass == "" || cssClass == "MouseOver") {                obj.className = isHover ? "MouseOver" : "";                return;    }    var color = "#000000";    var oddColor = "#000000";                        if(isHover) {                //obj.style.backgroundImage = "url(/images/main/bg19.gif)";                //alert(cssClass);                obj.style.backgroundColor = "#FFCC00";                obj.style.borderColor = "#ffe066 #907608 #907608 #ffe066";        } else {            color = "";            oddColor = "";                obj.style.backgroundColor = "";                obj.style.borderColor = "";                //obj.style.backgroundImage = "url(/images/main/bg09.gif)";    }        obj.style.color = color;                                         // set color of this element        var tds = obj.getElementsByTagName("td");        // and all child TDs        for (var i = 0; i < tds.length; i++) {            if (tds[i].className == "odd") {                        tds[i].style.color = color;            } else {                tds[i].style.color = color;            }        }                }</script>

试试吧

2楼没什么改变啊就是 <script> 这个？？这个是 js文件里的调用的。 <br /> <br /> 和这个没关系吧。。。。 </script>

发现单独拿出来 html 保存的话不卡很正常。。在 asp文件里循环输出的时候就出毛病。。

这个估计你的td太多了

请问这个效果用 jquery 如何实现呢？

事件冒泡吧.. 改用jquery的 mosueEnter mouseLeave

LZ使用jquery实现的话，可以参照下面的：

var table = $("#table1");  // 假设table的id为table1function CreateTr() {    var tr = $("<tr></tr>");    var td = GetTd();    $(td).appendTo(tr);    $(tr).appendTo(table);}function GetTd() {    var td = $("<td></td>");    $(td).bind("mouseenter", function() {        // logic    });    $(td).bind("mouseleave", function() {        // logic    });    return td;}

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.