[解決済み】ホバー時に太字にするとインライン要素がずれる
2022-04-02 09:35:09
質問
HTMLのリストとCSSを使って、横長のメニューを作りました。リンクの上にマウスを置いたとき以外は、すべて正常に動作します。リンクの上にカーソルを置くと、太字になるように設定したため、メニューのリンクがずれてしまいます。
と同じ問題が発生します。 このSitePointの記事 . しかし、その投稿には適切な解決策がありません。解決策をあちこちで探しましたが、見つけることができません。 きっと、これをやろうとしているのは私だけではないでしょう。
どなたかお心当たりのある方はいらっしゃいませんか?
追伸:メニューアイテムのテキストの幅がわからないので、liアイテムの幅を設定するだけではダメなのです。
.nav { margin: 0; padding: 0; }
.nav li {
list-style: none;
display: inline;
border-left: #ffffff 1px solid;
}
.nav li a:link, .nav li a:visited {
text-decoration: none;
color: #000;
margin-left: 8px;
margin-right: 5px;
}
.nav li a:hover{
text-decoration: none;
font-weight: bold;
}
.nav li.first { border: none; }
<ul class="nav">
<li class="first"><a href="#">item 0</a></li>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
解決方法は?
幅の事前設定
は、親のホバースタイルと同じコンテンツとスタイルを持つ不可視の疑似要素を使用することによって実現します。のようなデータ属性を使用する。
title
をコンテンツのソースとして使用します。
li {
display: inline-block;
font-size: 0;
}
li a {
display:inline-block;
text-align:center;
font: normal 16px Arial;
text-transform: uppercase;
}
a:hover {
font-weight:bold;
}
/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
display: block;
content: attr(title);
font-weight: bold;
height: 0;
overflow: hidden;
visibility: hidden;
}
<ul>
<li><a href="#" title="height">height</a></li>
<li><a href="#" title="icon">icon</a></li>
<li><a href="#" title="left">left</a></li>
<li><a href="#" title="letter-spacing">letter-spacing</a></li>
<li><a href="#" title="line-height">line-height</a></li>
</ul>
関連
-
[解決済み】CSSの背景画像が表示されない。
-
[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか?[重複]
-
[解決済み】Markdownで'target="_blank"'でリンクを作成することはできますか?
-
[解決済み】ローカルの実行ファイルへのハイパーリンクを作成する方法は?
-
[解決済み】エラー。Body " の後の無効な CSS: 期待されるセレクタまたは at-rule は、4 行目の "{" でした。
-
[解決済み] css画像が表示されない
-
[解決済み] HTMLファイルへのリンクは可能ですか?
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] ある要素にカーソルを合わせたときに、他の要素に影響を与える方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Markdownで'target="_blank"'でリンクを作成することはできますか?
-
[解決済み】iframeの高さを100%にする方法【重複】。
-
[解決済み】#記号のHTML文字実体は何ですか?
-
[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするのですか?
-
[解決済み] d3.tipが動作しないのはなぜですか?
-
[解決済み] HTML5 Validation Error: body start tag が見えたが、同じタイプの要素がすでに開かれていた
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。
-
[解決済み] divが重ならないようにするには?
-
[解決済み] Add a scrollbar to a <textarea> [duplicate]
-
[解決済み] 画像をインラインで表示する方法