在懸停時顯示表格行旁邊的元素

Question

我想要實現的是當有人在桌面上盤旋時，我想在桌子的左側（桌子外面）顯示上下箭頭。 使用html / css或jquery實現此目的的最佳方法是什么？

Answer 1

你可以在沒有任何JavaScript的情況下完成它 - 只需要像這樣的純HTML：

CSS

table {
    margin:     100px;
}

td {
    position:   relative;
}

span.arrow {
    display:    none;
    width:      20px;
    height:     20px;
    position:   absolute;
    left:       -20px;
    border:     1px solid red;
}

tr:hover span.arrow {
    display:    block;
}

HTML

<table>
    <tr>
        <td>
            <span class="arrow"></span>
            Some content
        </td>
        <td>Some content</td>
    </tr>
</table>

這只是基本的想法。 請記住，箭頭必須與表格行“連接”，否則當你向它們移動時它們會再次隱藏（因為你會留下:hover <tr> :hover - 這就是為什么width和left量在例子中是相同的）。

DEMO

的jsfiddle

注意

我只在Safari中測試過這個。 對於所有其他瀏覽器，只需移動position: relative; 從<tr>到<table> ：

table {
    margin:100px;
    position: relative;
}

Answer 2

使用帶有jquery的toggleClass （http://api.jquery.com/toggleClass/）

HTML

<table>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td class="arrows">
            <div class="hide">up down</div>
        </td>
    </tr>
</table>

JS

$('.arrows').hover(function () {
    $(this).find('div').toggleClass('hide');
});

hide class可以簡單地顯示：none;。 如果需要，您還可以使用絕對定位將它們移出表格。