0

表形式のデータを含むテーブルがあります。

ここに画像の説明を入力

行の上にマウスを置くと、名前の横に拡大鏡が表示されます。

ここに画像の説明を入力

このアプローチの問題は、コンテンツ (アンダーソン) が右に移動するため、隣接する td (名) も右側に押し出されることです。行の上にカーソルを置くと、すべてが右に踊り始め、次に左に踊り始めるので、面倒です。

<td><i id="glass" class="icon-search icon-large"></i>Anderson</td>
<td>Michael</td>

.cb_table-hover tbody tr .icon-search{
    display: none;
}    

.cb_table-hover tbody tr:hover .icon-search{
    display: inline-block;
}

アイコンを左に配置しようとしましたが、状況を改善しません:

#glass{
    position:relative;
    left: -10px;
}

テーブル内の固定位置を確保するためにアイコンだけを導入することはいつでもできtdますが、これを行うためのより良い方法があるかどうか疑問に思います。ありがとう

4

3 に答える 3

1

これで CSS プロパティを変更します。

.cb_table-hover tbody tr .icon-search{
    visibility: hidden;
}

.cb_table-hover tbody tr:hover .icon-search{
    visibility: visible;
}

Visibility プロパティは要素を非表示にしますが、占有するスペースは非表示にしません。

于 2012-12-04T10:47:27.640 に答える
1

使用する

visibility: hidden;

それ以外の

display: none;

これにより、画像要素に必要なスペースが保持され、他の要素のジャンプが回避されます。

于 2012-12-04T10:45:19.387 に答える
0

bg imageホバー時に画像を追加

td{padding: 4px 18px; border:grey 1px solid}
td:hover{background:url(http://inotesapp.com/images/search_icon.png) left no-repeat; background-size:18px}

デモ

于 2012-12-04T10:46:29.480 に答える