0

I hope someone can help resolve a small issue for me. What I have is a table, and some of the cells contain a div (set to hide). On mouse over of that cell, I would like that div to become visible. Below is an extract of my table code.

The script that I need should check if the cell contains a div; on mouse hover of that div, show it and hide the others. If cursor is not hovering a div, then it should show none of the divs.

<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>
4

1 回答 1

0
$('td > div.hoverinfo').mouseover(function() {
    $('td > div.hoverinfo').hide();
    $(this).show();
}); 
于 2012-05-24T06:01:37.880 回答