ホバー効果によって絶対に配置された要素が移動しないようにするにはどうすればよいですか?

CSS ホバー境界線の調整: 絶対位置を確保する

境界線のある要素にホバー効果を適用する場合、次のような理由でわずかに位置が変更されることは珍しくありません。追加された幅。これは、特に正確な位置合わせが必要な要素の場合、イライラする可能性があります。

問題:

境界線を追加するホバー効果を持つアンカーの順序なしリストを考えてみましょう。アンカーの上にマウスを置くと、他のアンカーが左にわずかに移動し、全体のレイアウトが乱れます。

解決策:

絶対的な位置を維持するには、透明な境界線をアンカーに追加します。要素の非ホバー状態。これはプレースホルダーとして機能し、実際の境界線がホバー時に表示されるときに予期せず飛び出すのを防ぎます。

CSS:

#homeheader a:visited, #homeheader a{
    border:1px solid transparent;
}

この変更により、アンカーに透明な境界線が追加されます。初期状態では。ホバー状態が適用されると、再配置を行わずに実際の実線の境界線が表示されます。

デモ:

ソリューションの実際の動作を確認するには、次の更新された JS Fiddle デモにアクセスしてください。 :

http://jsfiddle.net/TEUhM/3/

以上がホバー効果によって絶対に配置された要素が移動しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。