Q&A
実現したいこと
下記ソースを実行し、左上にある赤い三（ハンバーガーメニュー）アイコンを押すと、上記画像のように右側からドロワーメニュー（ハンバーガーメニュー）が表示されます。
この時、画面左側にある灰色の部分にマウスのカーソルを乗せると、灰色が濃く色付いてしまいます。
これを、元々も色である”薄い灰色のまま（濃い灰色にしたくない）”にするためにはCSSのどこをどうしたらいいでしょうか？
発生している問題・分からないこと
「実現したいことを教えてください」をご参照ください。
該当のソースコード
HTML
1<!doctype html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 8 <link href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet"> 9 <title></title> 10 <style> 11 .menu-btn { 12 top: 0; 13 right: 1px; 14 display: flex; 15 justify-content: center; 16 align-items: center; 17 z-index: 90; 18 background-color: transparent; 19 } 20 21 .menu-btn span, 22 .menu-btn span:before, 23 .menu-btn span:after { 24 content: ''; 25 display: block; 26 height: 5px; 27 width: 25px; 28 border-radius: 5px; 29 background-color: red; 30 position: absolute; 31 } 32 33 .menu-btn span:before { 34 bottom: 8px; 35 } 36 .menu-btn span:after { 37 top: 8px; 38 } 39 40 #menu-btn-check { 41 display: none; 42 } 43 44 .menu-content { 45 width: 55%; 46 height: 100%; 47 position: fixed; 48 top: 0; 49 left: 100%; 50 z-index: 80; 51 background-color: white; 52 transition: all 0.5s; 53 54 overflow: scroll; 55 -webkit-overflow-scrolling: touch; 56 } 57 58 .menu-content ul li { 59 border-bottom: solid 1px lightgray; 60 list-style: none; 61 } 62 63 .menu-content ul li a { 64 display: block; 65 width: 100%; 66 font-size: 15px; 67 box-sizing: border-box; 68 color:#000; 69 text-decoration: none; 70 padding: 19px 25px 20px 10px; 71 position: relative; 72 } 73 74 .menu-content ul li a::before { 75 content: ""; 76 width: 7px; 77 height: 7px; 78 border-top: solid 2px #ffffff; 79 border-right: solid 2px #ffffff; 80 transform: rotate(45deg); 81 position: absolute; 82 right: 52%; 83 top: 16px; 84 } 85 86 #menu-btn-check:checked ~ .menu-content { 87 left: 50%; 88 } 89 .close { 90 width: 100%; 91 height: 100%; 92 position: fixed; 93 top: 0; 94 left: 100%; 95 z-index: 50; 96 background-color: gray; 97 } 98 99 #menu-btn-check:checked ~ .close { 100 left:0; 101 } 102 </style> 103</head> 104<body class=""> 105 <div id="app"> 106 <nav class="navbar navbar-expand-md navbar-light shadow-sm bg-white fixed-top"> 107 <div class="container justify-content-center"> 108 <div class="row col-xl-10 pl-0 pr-0"> 109 <div class="col-12 pl-0 pr-0"> 110 <div class="row"> 111 <div class="col-4"> 112 <ul class="nav list-inline"> 113 <div class="hamburger-menu"> 114   115 <input type="checkbox" id="menu-btn-check"> 116 <label for="menu-btn-check" class="menu-btn"><span></span></label> 117 <label for="menu-btn-check" class="close"></label> 118 119 <div class="menu-content"> 120   121 <h3>←の灰色部に<br>カーソルを当てると、<br>灰色が濃くなる現象を<br>解決したい</h3> 122 </div> 123 </div> 124 </ul> 125 </div> 126 </div> 127 </div> 128 </div> 129 </div> 130 </nav> 131 </div> 132</body> 133</html>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
この灰色を指定してるのは「.close」クラスです。
カーソルを合わせる＝hoverと考え、以下のクラスを追加しましたが、変化ありませんでした。
CSS
1.close:hover{ 2 background-color: gray; 3}
補足
特になし
回答1件
0
ベストアンサー
.closeの名前を変えるといいかと思います。
↓このユーティリティのCSSの影響を受けてます。
Close icon - Bootstrap 4.3 - 日本語リファレンス
投稿2024/12/27 02:20
総合スコア37040
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/12/27 03:55