使用時のCSS境界の問題：trでホバー

データテーブル内でマウスのある行を強調表示しようとしています。私はボーダートップとボーダーボトムでこれをしようとしています。読みやすさを助けるために、私はまた、交互の行に明るい透明なPNGを持っています。使用時のCSS境界の問題：trでホバー

私は境界線（IE8 +とFFで動作します）をオンまたはオフにすると、行が少しジャンプしているようです。私は、ホバリングしない透明な境界を持つことで解決できると思います。このx-browserは現在互換性がありますか？

Chromeでは、行からマウスを離したときにハイライトされた行の境界線が消えないのはなぜですか？

http://justinzaun.com/Tree/people/

更新：は、私は彼らが離れて行くだろうクロムで国境問題を修正しました。私は境界線をTRではなくTDに移動しました。行はまだ飛び回っています。

ありがとうございます！

出典

2011-07-26 Justin808

Chromeの場合（私にとっては）、私が下に移動すると境界線がなくなりますが、ページを上に移動すると境界線が消えます。 – MrWhite

@ w3d - その問題を解決しました。問題は左に移動するだけです。 – Justin808

普通の状態要素に透明な境界線を付けます。

:hoverを適用すると、境界線のサイズによって要素が占めるサイズが変わります。

例：

.myelement 
{ 
     border:4px solid transparent; 
} 

.myelement:hover 
{ 
    border: 4px solid green; 
}

http://jsfiddle.net/mPmRA/

EDIT： - あなたのテーブルに、より具体的に（ぐふ：テーブル...崩壊の境界が正しく動作しない上記なります）

http://jsfiddle.net/mPmRA/1/

tr td境界は、行の境界線上に表示されます

tr:hover td 
{ 
    border-top:4px solid green; 
    border-bottom:4px solid green; 
}

：tr

tr 
{ 
    border-top:4px solid transparent; 
    border-bottom:4px solid transparent; 
}

そしてホバーのためにansperant境界線は次のように何かをします。

出典

2011-07-27 07:00:49

簡単な方法は、「margin-top：-1px; margin-bottom：-1px;」を追加することです。：hoverスタイルにすると、新しい高さが境界線で修正されます。

出典

2011-07-26 18:46:27 Wulf

こんにちはWulf、私は負のマージンを含むようにCSSを更新しましたが、行はまだジャンプしています。 – Justin808

また、デフォルトのスタイルにパディングを追加し、ボーダーを追加するときに '：hover'スタイルで取り除くことができますか？ – MrWhite

+1偉大な呼び出し、これは罫線を追加するホバーメニューを扱うときにIE8の透明性をサポートしようとするよりも優れています –

ボーダーが外側ではなくINSIDEに設定されていることを確認してください。残念ながら、枠線のインセットオプションはまだCSSの一部ではありません。ここではCSSのビットは、ボックスシャドウを使用して要素内の境界線を作ることです：あなたの要素の内側に1pxの黒い境界線を行います

.mytable tr:hover { 
    -moz-box-shadow: inset 0 0 1px #000; 
}

！：D 黒い点線の境界線に設定されている場合、これが役立つことを願っています。唯一の選択肢は、絶対位置を設定し、各テーブル行を個別に配置することです。：/ 相対的または静的な配置がある場合、要素のサイズが大きくなると要素が移動します。 Wulfのアイデアはちょっとした設定でうまくいくかもしれませんが、正直言ってボックスシャドウは点線の境界線よりはるかに良い境界線です。（自分で言うとちょっとタッキリです^^）申し訳ございません。

出典

2011-07-27 06:55:03 alt

使用時のCSS境界の問題：trでホバー

答えて

関連する問題