html - カーソルを置いて太字にするとインライン要素が移動する

Question

HTML リストと CSS を使用して水平メニューを作成しました。リンクの上にカーソルを置いたときを除いて、すべてが正常に機能します。ご覧のとおり、リンクに太字のホバー状態を作成しました。太字のサイズの違いにより、メニューリンクが移動します。

この SitePoint の投稿と同じ問題が発生します。ただし、投稿には適切な解決策がありません。どこでも解決策を探しましたが、見つかりません。確かに、これをやろうとしているのは私だけではありません。

誰にもアイデアはありますか？

PS: メニュー項目のテキストの幅がわからないので、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>

score 39 · Accepted Answer

別のアイデアはletter-spacing

li, a { display: inline-block; }
a {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.235px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}

<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

score 17 · Accepted Answer

jquery の1行:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

編集: これは解決策をもたらす可能性がありますが、元の投稿のコードと組み合わせて機能しないことに注意してください。幅設定を有効にし、水平メニューを意図したとおりに機能させるには、「display:inline」をフローティングパラメータに置き換える必要があります。

score 5 · Accepted Answer

次のようなものを使用できます

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

次に、css でスパンコンテンツを太字に設定し、visibility: hidden で非表示にして、その寸法を維持します。次に、次の要素の余白を調整して、適切に収まるようにします。

ただし、このアプローチが SEO に適しているかどうかはわかりません。

score 5 · Accepted Answer

「シャドウ」ソリューションで問題を解決しました。それは最も簡単で効果的なようです。

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

影を 3 回繰り返す必要はありません (結果は同じでした)。

score 4 · Accepted Answer

私はあなたに似た問題を抱えていました。リンクにカーソルを合わせると、メニューだけでなくテキストでも太字になるようにしました。ご想像のとおり、さまざまな幅をすべて把握するのは大変な作業です。解決策は非常に簡単です。

太字のリンクテキストを含むボックスを作成しますが、背景と同じ色ですが、実際のリンクはその上にあります。これが私のページの例です：

CSS:

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

もちろん、 #FFFFE0 をページの背景色に置き換える必要があります。z-indices は必要ないように見えますが、とにかく入れておきます ("hypo" 要素は HTML コードの "hyper" 要素の後に発生するため)。ここで、ページにリンクを配置するには、次の内容を含めます。

HTML:

You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

2 番目の「ここ」は非表示になり、リンクの下に隠されます。これはリンクテキストが太字の静的なボックスであるため、残りのテキストは、リンクにカーソルを合わせる前に既にシフトされているため、それ以上シフトすることはありません。

私が助けることができたことを願っています:)。

さよなら

score 2 · Accepted Answer

「マージン」プロパティを使用できます。

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

余分なスペースに太字のテキストを含めることができるように、左右の余白が十分に大きいことを確認してください。長い単語の場合は、別の余白を選択できます。それは単なる別の回避策ですが、私のために仕事をしています。

score 2 · Accepted Answer

別のアプローチは、テキストシャドウを介して太字のテキストを「エミュレート」することです。これには、フォントアイコンでも機能するボーナス (ケースによっては /malus) があります。

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

ちょっとハックですが、テキストを複製する必要はありません (これは、私の場合のように、テキストが多い場合に役立ちます)。

score 2 · Accepted Answer

代わりに text-shadow を使用するのが好きです。特に、トランジションを使用してテキストの影をアニメーション化できるためです。

本当に必要なのは次のとおりです。

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

完全なナビゲーションについては、この jsfiddle をチェックしてください: https://jsfiddle.net/831r3yrb/

text-shadow に関するブラウザーサポートと詳細情報: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

score 1 · Accepted Answer

ホバー時にフォント (°) を切り替えないようにアドバイスします。この場合、メニュー項目が少し移動しているだけですが、幅を広げると余分なワードラップが発生するため、段落全体が再フォーマットされるケースを見てきました。唯一の操作がカーソルの移動である場合、これが発生するのを見たくありません。何もしなければ、ページレイアウトは変更されません。

シフトは、通常とイタリックを切り替えるときにも発生する可能性があります。テキストの下に余裕がある場合は、色を変更するか、下線を切り替えます。(下線は下の境界線から離れている必要があります)

Form Design クラスでフォントの切り替えを使用するとブーイングされます :-)

(°) フォントという言葉はよく誤用されます。「Verdana」は書体で、「Verdana normal」と「Verdana bold」は同じ書体の異なるフォントです。

score 0 · Accepted Answer

これはどうですか？JavaScript - CSS3 フリーのソリューション。

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>

score 0 · Accepted Answer

これは私が好む解決策です。少しの JS が必要ですが、title プロパティをまったく同じにする必要はなく、CSS は非常に単純なままでかまいません。

$('ul a').each(function() {
  $(this).css({
    'padding-left': 0,
    'padding-right': 0,
    'width': $(this).outerWidth()
  });
});

li, a { display: inline-block; }
a {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center; /* optional, smoother */
}
a:hover { font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

score -1 · Accepted Answer

Javascript の使用に抵抗がない場合は、ページが表示された後に適切な幅を設定できます。これが私がやった方法です（Prototypeを使用）：

$$('ul.nav li').each(this.setProperWidth);

setProperWidth: function(li)
{
  // Prototype's getWidth() includes padding, so we 
  // have to subtract that when we set the width.
  var paddingLeft = li.getStyle('padding-left'),
      paddingRight = li.getStyle('padding-right');

  // Cut out the 'px' at the end of each padding
  paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
  paddingRight = paddingRight.substring(0,paddingRight.length-2);

  // Make the li bold, set the width, then unbold it
  li.setStyle({ fontWeight: 'bold' });
  li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
  li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}

score -2 · Accepted Answer

問題に対する簡単な解決策があるのに、誰かがそのように何かをするなと言われたら、私は本当に我慢できません. li要素についてはよくわかりませんが、同じ問題を修正しました。div タグで構成されるメニューがあります。

div タグを「display: inline-block」に設定するだけです。インラインなので、それらは互いに隣り合って配置され、幅を設定できるようにブロックされます。太字のテキストに合わせて十分な幅を設定し、テキストを中央揃えにします。

(注: 私の html [下] を削除しているようですが、各メニュー項目には、対応する ID とクラス名 SearchBar_Cateogory で囲まれた div タグがありました。つまり:<div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (各メニュー項目にアンカータグを巻き付けましたが、新しいユーザーとして送信できませんでした)

<div id="ROS_SearchSermons" class="SearchBar_Cateogry bold">Sermons</div>|
<div id="ROS_SearchIllustrations" class="SearchBar_Cateogry">Illustrations</div>|
<div id="ROS_SearchVideos" class="SearchBar_Cateogry">Videos</div>|
<div id="ROS_SearchPowerPoints" class="SearchBar_Cateogry">PowerPoints</div>|
<div id="ROS_SearchScripture" class="SearchBar_Cateogry">Scripture</div>|

CSS:

#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }

.SearchBar_Cateogry
{
    display: inline-block;
    text-align:center;
}

score -3 · Accepted Answer

太字のテキストが通常よりも広い場合は、負のマージンも試すことができます。（常にではありません）したがって、代わりにクラスを使用して :hover 状態をスタイルするという考えです。

jQuery:

 $(".nav-main .navbar-collapse > ul > li > a").hover(function() {
    var originalWidth = $(this).outerWidth();

    $(this).parent().addClass("hover");
    $(this).css({
       "margin-left": -(($(this).outerWidth() - originalWidth) / 2),
       "margin-right": -(($(this).outerWidth() - originalWidth) / 2)
    });
 },
 function() {
    $(this).removeAttr("style");
    $(this).parent().removeClass("hover");
 });

CSS:

ul > li > a {
    font-style: normal;
}

ul > li > a.hover {
    font-style: bold;
}

お役に立てれば幸いです！

html - カーソルを置いて太字にするとインライン要素が移動する

29 に答える 29

Related

Reference