Q&A
リンク内容
ナビゲーションメニューに対して、マウスホバーしたときにフォントを太くする様に、jQueryとcssを用いて実装したのですが、上記のリンクの様に、ホバーした要素が太くなった分ほかの要素の位置が動いてしまうのですが、どの様にしたらこれを防げるでしょうか？
自分なりに調べたのですが、良い解決法を見つけられなかったので質問させていただきました。
解決法がわかる方、是非ご教授お願いいたします。
コードは下記です。
html
1<header class="header-section"> 2 <div class="header-container"> 3 <div class="header-logo-container"> 4 <img src="img/header-logo.png" class="header-logo" /> 5 </div> 6 <div class="header-nav-container"> 7 <nav class="header-nav"> 8 <ul class="header-list"> 9 <li class="header-list-items"> 10 <a href="#about" class="header-list-item">About</a> 11 </li> 12 <li class="header-list-items"> 13 <a href="#works" class="header-list-item">Works</a> 14 </li> 15 <li class="header-list-items"> 16 <a href="#service" class="header-list- 17 item">Services</a> 18 </li> 19 <li class="header-list-items"> 20 <a href="#contact" class="header-list-item">Contact</a> 21 </li> 22 </ul> 23 </nav> 24 </div> 25 </div> 26</header>
css
1.header-section { 2 width: 100%; 3 position: fixed; 4 z-index: 2; 5} 6 7.header-container { 8 display: flex; 9} 10 11.header-logo-container { 12 width: 8%; 13} 14 15.header-logo { 16 width: 100%; 17} 18 19.header-nav-container { 20 width: 90%; 21} 22 23.header-nav { 24 position: relative; 25 top: 50%; 26 transform: translateY(-50%); 27} 28 29.header-list { 30 list-style-type: none; 31 display: flex; 32 justify-content: space-around; 33 align-items: center; 34 padding: 0; 35} 36 37.header-list-items { 38 font-size: 3rem; 39 transition: 0.4s; 40 text-align: center; 41} 42 43.header-list-item { 44 color: black; 45 text-decoration: none; 46} 47 48.header-list-items::after { 49 content: '\a-自己紹介-'; 50 white-space: pre; 51 font-size: 1rem; 52}
javascript
1{ 2 $(function() { 3 $('.header-list-item').hover( 4 function() { 5 $(this).css('font-weight', 'bolder'); 6 }, 7 function() { 8 $(this).css('font-weight', 'normal'); 9 } 10 ); 11 }); 12}
回答1件
0
ベストアンサー
手っ取り早いのは.header-list-itemに適当な幅をもたせてblock表示にすることです
指定のhover処理はcssだけで十分です
CSS
1.header-list-item{ 2 display:block; 3 width:200px; 4} 5.header-list-item:hover{ 6 font-weight:bold; 7} 8
投稿2020/07/07 15:19
総合スコア114829
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/08 00:33