ホバーで太字にするとインライン要素がシフトする


204

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>

回答:


390

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;
}
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>

JSfiddleの実際の例を確認してください。アイデアは:hover:before擬似要素で太字(または任意の状態スタイル)のコンテンツ用にスペースを予約し、コンテンツのソースとしてタイトルタグを使用することです。


20
パーフェクト!<a>ではulを使用しなくても機能しますが、タイトルではなく、data-textなどの別の属性を使用します。
brittongr 2014年

6
このソリューションは機能しますが、高さ1pxのスペースが作成margin-top: -1px:afterれないように追加する場合は、より良い方法です。
micropro.cz

4
@ mattroberts33 :::「ダブルコロン::CSS3構文をサポートするすべてのブラウザも:構文のみをサポートしますが、IE 8はシングルコロンのみをサポートするため、現時点では、最高のブラウザサポートのためにシングルコロンのみを使用することをお勧めします。」css-tricks.com/almanac/selectors/a/after-and-before
gfullam

1
@HughHughTeotl使用フォントサイズ:0 UL、またはa::after、他の言葉で-すべてのパディング/ marging /行高さ/フォントサイズ等をリセット
350D

1
残念ながら、常にツールチップが表示されます:-(
Benedikt

42

妥協した解決策は、テキストの影で大胆に見せかけることです。例:

text-shadow:0 0 0.01px黒;

より良い比較のために、これらの例を作成しました:

a, li {
  color: black;
  text-decoration: none;
  font: 18px sans-serif;
  letter-spacing: 0.03em;
}
li {
  display: inline-block;
  margin-right: 20px;
  color: gray;
  font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
  text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
  font-weight: bold;
}

.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
 margin-left: -6px;
 letter-spacing: 0.01em;
}
<ul class="bold-x1">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (native)</li>
</ul>
<ul class="bold-x3">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Black (text-shadow x3)</li>
</ul>

text-shadow非常に低い値に渡すとblur-radius、ぼかし効果がそれほどはっきりしなくなります。

一般的に、リピートが多いほどtext-shadowテキストが太くなりますが、同時に文字の元の形状が失われます。

blur-radius分数を設定しても、すべてのブラウザで同じように表示されるわけではないことに注意してください。たとえばSafariでは、Chromeと同じようにレンダリングするために、より大きな値が必要です。


6
これは他のブラウザで計算された大胆なソリューションよりも醜く、避ける必要があります
Zach Saucier

28

幅を設定できない場合は、テキストが太字になるにつれて幅が変化することを意味します。これを回避する方法はありませんが、各状態のパディング/マージンを変更するなどの妥協点があります。


2
Andrewが言うように+1、太字のテキストは幅が広くなっています。人生の事実。メニュー項目の幅を修正して、これを回避するか、それと共存させます(パディングの再計算は不正確であり、エラーが発生しやすくなります)。
cletus 2009

そうです、私はこの理由で大胆なマウスオーバー効果を避けがちです。
スティーブウォーサム

「これを回避する方法はありません」。下記の350Dまでの回答をご覧ください。
gfullam、2015年

Andrewの回答が350Dのソリューションが追加される4年前に投稿されたことにも注意してください。コンテンツ値としてattr()関数を使用した疑似要素は、当時は絶対に不可能でした:)ああ、時間はスタックオーバーフローで飛んでいます。しかし、コミュニティはそれを乗り越え、それが受け入れられた回答であり、ほとんどの賛成投票であるので、私は幸せです!
Justus Romijn

25

別のアイデアは使用しています 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>


すべてのブラウザー、特にIE10 +とSafariで動作しますか?
Umair Hafeez

私のお気に入りの1つ:)
Inc33

1
@UmairHafeezはい、すべての最新のブラウザはopera mini caniuse.com/#feat=css-letter-spacing
John Magnolia

1
0.235pxが最適な量であることをどのようにして知りましたか?必要な間隔を計算する式はありますか?
Cold_Class

いいえ、それは単なる試行錯誤だったと思います
ジョンマグノリア

17

jqueryの1行:

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

編集: これは解決策をもたらす可能性がありますが、元の投稿のコードと連動して機能しないことを言及する必要があります。"display:inline"は、幅設定を有効にし、その水平メニューが意図したとおりに機能するように、フローティングパラメーターに置き換える必要があります。


ページ内のすべてのリンクに対してこれを実行できますか?つまり、置き換えないされul.nav li aa作品?
gnzlbg 2014

2
この質問には、JSはもちろん、jQueryのタグも付けられていません。不要な解決策を投稿しないでください。
Zach Saucier 2016年

2
@Zach Saucier一部の開発者は、通常は短いため、JSソリューションを好む開発者もいます。JSで何かを投稿したすべての人に反対票を投じる代わりに、JSタグを質問に追加して、それぞれがより役立つ解決策を各人に決定させることができます。
lurkit 2016年

1
@Zach Saucier CSSソリューションは、状況によっては実用的でない場合があります。場合によっては、別のタイトル属性が必要な場合や、:: after疑似要素がすでに使用されている場合や、特定の状況でJSの1つのライナーをCSSの複数の行に使用する方が実際的であると考える場合があります。私はCSSの回答がほとんどの場合に優れていると考えていますが、追加のオプションとしてJSの回答があると便利です。
lurkit 2016年

これは、要素間の間隔を維持しながら問題を解決することができる唯一の解決策です。
Jaiden Mispy 16年

11

CSS3ソリューション-実験的

(偽の大胆さ)

ここでは誰も提案していない別の解決策を共有すると思いました。これtext-strokeに便利なというプロパティがあります。

p span:hover {
  -webkit-text-stroke: 1px black;
}
<p>Some stuff, <span>hover this,</span> it's cool</p>

ここでは、spanタグ内のテキストをターゲットにして、特定のテキストのスタイルをblackシミュレートするピクセルでストロークしboldます。

このプロパティは広くサポートされていないことに注意してください。現在(この回答を書いている最中)、ChromeとFirefoxのみがこれをサポートしているようです。のブラウザサポートの詳細についてtext-strokeは、CanIUseを参照してください


余分なものを共有-webkit-text-stroke-width: 1px;するcolorためだけに、ストロークにを設定したくない場合に使用できます。



素晴らしいヒント。残念ながら、4年経ってもまだ標準ではありません。
デヴィッド・Veszelovszki

5

あなたは次のような何かを使うことができます

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

そして、CSSでスパンコンテンツを太字に設定し、可視性で非表示にします:非表示にして、寸法を維持します。次に、以下の要素のマージンを調整して、適切に合わせることができます。

このアプローチがSEOフレンドリーかどうかはわかりません。


1
これも開発者/保守に優しくない
Zach Saucier 2016年

5

「シャドウ」ソリューションで問題を解決しました。最もシンプルで効果的です。

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

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


これは、他のブラウザで計算された大胆なソリューションよりも醜く、避ける必要があります
Zach Saucier

4

私はあなたのような問題を抱えていました。メニューの上だけでなく、テキストの上にマウスを置くと、リンクが太字になりました。あなたが推測するように、それはすべての異なる幅を理解することは本当の雑用になるでしょう。解決策は非常に簡単です。

太字でリンクテキストを含むボックスを作成しますが、背景のように色を付け、その上に実際のリンクを配置します。これが私のページの例です:

CSS:

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

もちろん、#FFFFE0をページの背景色に置き換える必要があります。Zインデックスは必要ないようですが、とにかく配置します(「hypo」要素はHTMLコードの「hyper」要素の後に発生するため)。ここで、ページにリンクを配置するには、以下を含めます。

HTML:

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

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

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

さよなら


2

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

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

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

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


私は同様のソリューションを使用しましたが、ホバースタイルに「margin:0 -2px」を追加するだけで(通常のスタイルには何も追加しない)、うまくいきました。
Yuval A.

8
文字列の長さにばらつきがある場合、これは機能しません
kat

2

代わりにテキストシャドウを使用します。特に、トランジションを使用してテキストの影をアニメーション化できるためです。

本当に必要なのは:

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

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

ブラウザのサポートとテキストシャドウの詳細:http : //www.w3schools.com/cssref/css3_pr_text-shadow.asp


これは、トランジションを使用するとうまく機能します。素晴らしい代替ソリューション。
Yazmin

1

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

シフトは、通常とイタリックを切り替えるときにも発生する可能性があります。色を変えてみるか、テキストの下にスペースがある場合は下線を切り替えます。(下線は下の境界線から明確に保つ必要があります)

フォームデザインクラスにフォントの切り替えを使用した場合、私は不満を感じるでしょう:-)

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


1

ul {
  list-style-marker: none;
  padding: 0;
}

li {
  display: inline-block;
}

li + li {
  margin-left: 1em;
}

a {
  display: block;
  position: relative;
  text-align: center;
}

a:before, a:after {
  content: attr(aria-label);
  text-decoration: inherit;
}

a:before {
  font-weight: bold;
  visibility: hidden;
}

a:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

a:hover:before {
  visibility: visible;
}

a:hover:after {
  display: none;
}
<ul>
  <li>
    <a href="" aria-label="Long-long-long"></a>
  </li><li>
    <a href="" aria-label="or"></a>
  </li><li>
    <a href="" aria-label="Short"></a>
  </li><li>
    <a href="" aria-label="Links"></a>
  </li><li>
    <a href="" aria-label="Here"></a>
  </li>
</ul>


1

他の人がここで言及したように、私はテキストシャドウソリューションを使用します:

text-shadow: 0 0 0.01px;

違いは、私は影の色を指定しないことです。そのため、この解決策はすべてのフォントの色に共通です。


1

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

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

ちょっとハッキーですが、テキストを複製する手間が省けます(これは、私の場合のように、大量にある場合に役立ちます)。


0

これが私が好むソリューションです。これには少し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>


0

これはどうですか?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>

1
これは、問題を修正するためのかなりの追加マークアップとCSSです...それは、開発者、SEO、または将来のフレンドリではありません
Zach Saucier

0

あまりエレガントな解決策ではありませんが、「機能します」:

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

0

上記の手法を組み合わせて、jsをオフにしても完全には機能せず、少しjQueryを使用するとさらに優れたものを提供します。ブラウザがサブピクセルの文字間隔のサポートを改善している今、それを使うのは本当に素晴らしいことです。

jQuery(document).ready(function($) {
  $('.nav a').each(function(){
      $(this).clone().addClass('hoverclone').fadeTo(0,0).insertAfter($(this));
    var regular = $(this);
    var hoverclone = $(this).next('.hoverclone');
    regular.parent().not('.current_page_item').hover(function(){
      regular.filter(':not(:animated)').fadeTo(200,0);
      hoverclone.fadeTo(150,1);
    }, function(){
      regular.fadeTo(150,1);
      hoverclone.filter(':not(:animated)').fadeTo(250,0);
    });
  });
});
ul {
  font:normal 20px Arial;
  text-align: center;
}
li, a {
  display:inline-block;
  text-align:center;
}
a {
  padding:4px 8px;
  text-decoration:none;
  color: #555;
}

.nav a {
  letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
  font-weight: bold;
  letter-spacing: 0px;
}
.nav li {
  position: relative;
}
.nav a.hoverclone {
  position: absolute;
  top:0;
  left: 0;
  white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="current_page_item"><a  href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>


0

これは、使用することをお勧めします::を前に、代わりに::した後、このように:

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.breadcrumb li, 
.breadcrumb li a {
  display: inline-block;
}

.breadcrumb li:not(:last-child)::after {
  content: '>'; /* or anything else */
  display: inline-block;
}

.breadcrumb a:hover {
  font-weight: bold;
}

.breadcrumb a::before {
  display: block;
  content: attr(data-label);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
<ul class="breadcrumb">
  <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
  <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
  <li><a data-label="three" href="#">three</a></li>
</ul>

詳細:https : //jsfiddle.net/r25foavy/


なぜa::beforeこれよりも優れているのか、その理由を教えてくださいa::after。それはあなたの答えの重要な部分のようですが、この場合、一方が他方より好ましい理由は明らかではありません。
nirvdrum

0

大胆に成功したときにメニューを修正しました。それはレスポンシブをサポートします、これは私のコードです:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);

-1

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' });
}

質問では、JavaScriptはタグ付けされていません。jQueryは言うまでもありません。質問にタグ付けされた言語を使用して回答を続けてください
Zach Saucier

-1

問題に対する単純な解決策があるときに誰かがそのように何かをしないように言われたとき、私は本当にそれに耐えることができません。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;
}

1
これは、指定されたOPがそうではないように、固定幅を使用しています。そのため、この回答は、尋ねられている質問に答えるものではありません
Zach Saucier

-1

これを試して:

.nav {
  font-family: monospace;
}

それはどのように変化しますか?
leonheess

@ MiXT4PEモノスペースでは、文字のサイズは通常または太字で同じです。サイズは変更されません
ユクレレ

そのためフォントファミリを変更することは解決策ではありません
funkysoul

font-familyはほとんどの場合すべてのブランドタイポグラフィのルートであるため、UIバグを修正するためにfont-familyを変更することは解決策ではありません。
Umair Hafeez

タイポグラフィはUIデザインの大部分であり、ブランド向けにデザインされた書体は、UIでの使用を考慮に入れる必要があります。PT SansとClear Sansは、2つの書体であり、ウェイト間でグリフの間隔が似ています。残念ながら、このプロパティを備えた(等幅ではない)書体はほとんどないため、書体の開発にお金を払うよりも、質問に対する他の回答の1つを実装する方が安上がりです。ただし、可変フォントの可用性が向上すると、それは変更されます。幅と太さが可変のフォントについては、v-fonts.comを参照してください。
Peter W

-3

太字のテキストが通常よりも広い場合は、負のマージンも試すことができます。(常にではありません)したがって、代わりにクラスを使用して: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;
}

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


1
タグ付けされた言語以外の言語で回答を投稿しないでください。これは、尋ねられている質問に答えるものではありません
Zach Saucier 2016年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.