1
私はちょうどHTML & CSSを学び始めており、その場で学ぶためにシンプルなウェブサイトを構築し始めました。ドロップダウンのテキストの色を変更するhtml
私は、ユーザーがリンク（コード内のdropbtn）を移動すると開くドロップダウンメニューを構築しようとしています。ドロップダウンメニューが開いているとき（ユーザーがボタンまたはドロップダウンオプションのいずれかにカーソルを置いているとき）、ボタンの背景色とテキストの色を変更したい。参考までに、http://www.cibc.caをご覧ください。それらのナビゲーションバーは茶色/赤色ですが、ユーザーがボタンの上を移動すると、ボタンの色が灰色（ドロップダウンメニューと一致するように）に変わり、テキスト色が栗色に変わります。ユーザーがドロップダウン・オプションに移動すると、色は同じに留まり、カーソルがドロップダウン・メニューから完全に離れると元の状態に戻ります。
これまでのところ、私はメニューを開いて、ボタンの背景色とテキスト色をユーザーがボタンの上に置いたときに変更するように作成しました。しかし、ユーザーがボタンからドロップダウンオプションの1つにカーソルを移動すると、ボタンのテキストの色は元のゴーストホワイトに戻り、テキストを見ることはできません。私はドロップダウンメニューが閉じられるまで、色を変更しないようにする方法を探しています。
これは私の最初の投稿ですstackoverflowので、投稿の問題については私を許してください。
編集：別の質問で見つかったこのコード行を追加しました。残念ながら、私はなぜそれが動作するのか分からないので、説明をいただければ幸いです。
#nav li:hover > a, #nav li:hover > a:link, #nav li:hover > a:visited{color:white;}
HTML：
<div>
<ul id = "menu">
<li><a class = "active" style = "color:dodgerblue" href = "http://www.google.ca">Home</a></li>
<li><a href = "website1.html">Projects</a></li>
<li><a href = "http://www.twitter.com">Community Involvement</a></li>
<li class = "dropdown">
<a class = "dropbtn" href = "#">Social Media</a>
<div class = "dropdown-content">
<a href = "http://www.facebook.com">Facebook</a>
<a href = "http://www.twitter.com">Twitter</a>
<a href = "http://www.instagram.com">Instagram</a></div>
</li>
<li><a href = "http://www.twitter.com">Join Our Team</a></li>
<li><a href = "http://www.twitter.com">FAQ</a></li>
<li><a href = "http://www.twitter.com">About Us</a></li>
<li><a href = "http://www.twitter.com">Contact Us</a></li>
</ul>
はCSS：
ul#menu li.dropdown .dropbtn{
display:inline-block;
color:ghostwhite;
text-decoration:none;
text-align:center;
padding:14px 16px;
}
ul#menu li a:hover:not(.active), .dropdown:hover .dropbtn{
background-color:ghostwhite;
color:dodgerblue;
}
.active{
background-color:ivory;
}
ul#menu li.dropdown{
display:inline-block;
}
ul#menu .dropdown-content {
display: none;
position: absolute;
background-color: ghostwhite;
min-width: 160px;
}
ul#menu .dropdown-content a{
color:dodgerblue;
padding: 12px 16px;
text-decoration:none;
display:block;
text-align:left;
}
ul#menu .dropdown .dropdown-content a:hover{
background-color: skyblue;
}
ul#menu .dropdown:hover .dropdown-content {
display: block;
}
これにはjavascriptが必要です。 –
私は自分の投稿を編集し、私が望むことをした別の答えで見つけたコード行を追加しました。しかし、なぜ私はそれが動作するように誰もが私のために多くを助けてくれると説明することができないのか分かりません。 – aratna