Onmouseover の反応が遅く、すぐに終わってしまうのはなぜですか? _html/css

jquery color クラス

最初にコードを添付します

<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' width='25' height='19'/></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 がループアウトされます。私が添付したのはテーブルの 1 つのデータです

問題は、td の onmouseover/out エフェクトの反応が遅いことです。マウスを上げたり戻したりした後でのみエフェクトが表示されることがあります。時々それは一瞬で消えます。なぜだかわかりませんか。誰か知っていますか？私は2日間混乱しましたが、うまくいかない場合は、専門家は上記のコードをjqueryに変更するように要求しました。onmouseoverエフェクトの代わりにjqueryを使用することも可能です。

ディスカッションに返信 (解決策)

<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' width='25' height='19'/></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 階何も変わっていない、ただ

著者別の最新記事