jquery - ホバー時に表の行の隣に要素を表示

Question

私が実装しようとしているのは、誰かがテーブルの行にカーソルを合わせたときに、テーブルの左側 (テーブルの外側) に上下の矢印を表示したいということです。html/cssまたはjqueryを使用してこれを実装する最良の方法は何ですか?

Answer 1

次のようなプレーンな HTML だけで、JavaScript なしで実行できます。

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>の例）。widthleft

デモ

jsフィドル

ノート

これはSafariでのみテストしました。他のすべてのブラウザーの場合はposition: relative;、から<tr>に移動するだけ<table>です。

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

Answer 2

toggleClassjquery で (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 クラスは単に display:none; にすることができます。必要に応じて、絶対配置を使用してテーブルの外に移動することもできます。