1

この質問は、私が尋ねた以前の質問のフォローアップです(別のひねりを加えたものです):

私の質問を適切に説明する方法がわかりません。これはバグであり、デバッグが必要です。

ここに私の jsFiddle があります: http://jsfiddle.net/Wagtail/b6Juh/18/

マウスがアイテム A から離れたときに完全に消えるのではなく、アイテム A、アイテム B、およびアイテム C をスクロールできるようにする必要があります。

便宜上コピーした JavaScript、HTML、および CSS コードを次に示します。

HTML

<table id="headMenu">
    <tr>
        <td id="head1">Item 1</td>
        <td id="head2">Item 2</td>
        <td id="head3">Item 3</td>
    </tr>
</table>
<table id="subMenu">
    <tr>
        <td>Dynamic Content!</td>
    </tr>
</table>​

CSS コード:

#headMenu{background:rgb(142,180,227);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:20px 5%  0px 5%%;vertical-align:middle;}
#subMenu{background:rgb(195,214,155);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:1px 5% auto 5%;vertical-align:middle;}
#headMenu td:hover{background:rgb(162,200,240);}
#subMenu td:hover{background:rgb(210,230,170);}​

JavaScript コード:

var a = 500, head1 = document.getElementById('head1'), subMenu = document.getElementById('subMenu'), timeout;

head1.onmouseover = function(displayMenu) {
    subMenu.innerHTML = '<tr><td>Item A</td><td>Item B</td><td>Item C</td></tr>';
    head1.onmouseout = function(getScroll) {
        subMenu.onmouseover = function(breakTimeout) {
            clearTimeout(timeout);
            subMenu.onmouseout = function(endFunction) {
                subMenu.innerHTML = '<tr><td>Dynamic Content!</td></tr>';
            };
        };
        timeout = setTimeout(function() {
            document.getElementById("subMenu").innerHTML = '<tr><td>Dynamic Content!</td></tr>';
        }, a);
    };
};

ご回答ありがとうございます。説明が必要な場合は、喜んで返信いたします。

4

1 に答える 1

1

マウスがサブメニュー テーブル セルの 1 つから別のセルに移動すると、 subMenu.onmouseout 関数がトリガーされます。これを修正する簡単な方法の 1 つは、セル間を移動するための別のタイムアウトを追加することです。

私が何を意味するかを示すために、jsfiddle の例を更新しました。

http://jsfiddle.net/b6Juh/22/

于 2012-06-08T16:31:26.693 に答える