jquery - 悬停时在表格行旁边显示元素

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>

这只是基本的想法。请记住，箭头必须与表格行有“连接”，否则当您向它们移动时它们会再次隐藏（因为您会离开 the :hoverof the <tr>- 这就是为什么 thewidth和 of 的数量left在这个例子）。

演示

jsFiddle

笔记

我只在 Safari 中测试过这个。对于所有其他浏览器，只需position: relative;从移动<tr>到<table>：

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

Answer 2

将toggleClass(http://api.jquery.com/toggleClass/) 与 jquery 一起使用

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

隐藏类可以简单地显示：无；。如果需要，您还可以使用绝对定位将它们移出表格。