表互动

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();
});