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

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>-这就是为什么width与量left都在同这个例子).

DEMO

的jsfiddle

注意

我只在Safari中测试过这个.对于所有其他浏览器简单地移动position: relative;从<tr>到<table>:

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