jquery - テーブル インタラクティブ

Question

誰かが私のために小さな問題を解決するのを手伝ってくれることを願っています. 私が持っているのはテーブルで、一部のセルには div (非表示に設定) が含まれています。そのセルにマウスを合わせると、その div が表示されるようになります。以下は私のテーブルコードの抜粋です。

必要なスクリプトは、セルに div が含まれているかどうかを確認する必要があります。そのdivのマウスホバーで、それを表示し、他のものを非表示にします。カーソルが div の上にない場合、div は表示されません。

<table>
    <tr>
        <th>Header One</th>
        <th>Header Two</th>
        <th>Header Three</th>
    </tr>
    <tr>
        <td>Something One
        <div id="wrapper1" class="hoverinfo" style="display:none;">
            <ul>
                <li>
                List Object One
                </li>
                <li>
                List Object Three
                </li>
                <li>
                List Object Four
                </li>
            </ul>
        </div></td>
        <td>Something Two</td>
        <td>Something three</td>
    </tr>
    <tr>
        <td>Something One</td>
        <td>Something Two
        <div id="wrapper2" class="hoverinfo" style="display:none;">
            <ul>
                <li>
                List Object five
                </li>
                <li>
                List Object six
                </li>
            </ul>
        </div></td>
        <td>Something three</td>
    </tr>
    <tr>
        <td>Something One
        <div id="wrapper2" class="hoverinfo" style="display:none;">
            <ul>
                <li>
                List Object seven
                </li>
                <li>
                List Object eight
                </li>
            </ul>
        </div></td>
        <td>Something Two</td>
        <td>Something three</td>
    </tr>
</table>

Answer 1

$('td > div.hoverinfo').mouseover(function() {
    $('td > div.hoverinfo').hide();
    $(this).show();
});