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

What I'm trying to implement is when someone hovers over a table row, I want to show up-and-down arrows on the left side of the table (outside of the table). What is the best way to implement this using html/css or jquery?

我想要实现的是当有人在桌面上盘旋时,我想在桌子的左侧(桌子外面)显示上下箭头。使用html / css或jquery实现此目的的最佳方法是什么?

2 个解决方案

#1

You can do it without any JavaScript - with just plain HTML like this:

你可以在没有任何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>

This is just the basic idea. Keep in mind, that the arrow must have a "connection" with the table row, otherwise they will hide again, when you move towards them (because than you would leave the :hover of the <tr> - that's why the width and the amount of left are the same in the example).

这只是基本的想法。请记住,箭头必须与表格行“连接”,否则当你向它们移动时它们会再次隐藏(因为你会留下:的悬停 - 这就是为什么宽度和左边的量在例子中是相同的)。

DEMO

jsFiddle

NOTE

I only tested this in Safari. For all other browsers simply move position: relative; from <tr> to <table>:

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

:

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

#2

Use toggleClass (http://api.jquery.com/toggleClass/) with jquery

使用带有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 could simply be display:none;. You could also use absolute positioning to move them outside the table if you want.

hide class可以简单地显示:none;。如果需要,您还可以使用绝对定位将它们移出表格。