Q&A
ご提示のコードを試してみましたが、問題が再現しませんでした。
おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。
問題再現の手順をもう少し詳しく書いていただけますか？
html/CSS勉強中のものです。
「スクロールをしたら、ヘッダーの背景が白くなり、ナビメニューのフォントが黒くなる」
ということを実現したいのですが、chrome環境下でうまくいっていません。
色々いじってみた結果、訪問済みのリンクだと「ナビメニューのフォントが黒くなる」がうまく動作しないことがわかりました。
マウスオーバーするとそこで初めて変化します（元が白い文字なので背景に同化してしまいます）。
Edgeやfirefoxなどの他のブラウザではうまく動作するので、原因としてはchromeの仕様かと考えております。
そこで色々と検索してみたのですが、はっきりわかりませんでした。
初心者質問で恐縮ですが、この状況を回避できる方法などぜひ教えて頂けたら幸いです。
CSS
1.header { 2 padding: 0px 20px; 3 position: fixed; 4 background-color: rgba(255,255,255,0.00); 5 height: 80px; 6 width: 100%; 7 transition: all 0.3s; 8 z-index: 5; 9 color: #fff; 10} 11 12.header.change-color { 13 background-color: #fff; 14 color: #000; 15}
JavaScript
1<script> 2 jQuery(window).on('scroll', function () { 3 if (50 < jQuery(this).scrollTop()) { 4 jQuery('.header').addClass('change-color'); 5 } else { 6 jQuery('.header').removeClass('change-color'); 7 } 8 }); 9</script>
ご質問ありがとうございます！
そうですか…html/CSSの記述は単純化していますが以下の通りです、
ローカルにある作成したhtmlファイルをchromeで開くと、その現象が発生します。
つまり、youtube（今回問題にしている訪問済みリンクの例）にリンクを張ったmenu1の文字色がスクロールで変化せず、マウスオーバーするまで黒色に変化しません。
もちろんサーバにあげてアクセスしても同様です。
単純化した下記の状態でも同様の現象を確認しています。
ご質問の回答になっていますでしょうか…。
```html
<header class="header">
<nav>
<ul>
<li>
<a href="https://www.youtube.com/">menu1</a>
</li>
<li>
<a href="#">menu2</a>
</li>
<li>
<a href="#">menu3</a>
</li>
</ul>
</nav>
</header>
<div class="space"></div>
```
```CSS
body{
background-color: grey;
}
.header {
padding: 0px 20px;
position: fixed;
background-color: rgba(255,255,255,0.00);
height: 80px;
width: 100%;
transition: all 0.3s;
z-index: 5;
color: #fff;
}
.header.change-color {
background-color: #fff;
color: #000;
}
nav ul {
display: flex;
margin: 25px 0px;
list-style: none;
}
nav li {
width: 100px;
}
.space {
height: 200vh;
}
```
以下のサンプルの通り、やはり問題が再現しませんでした。
https://jsfiddle.net/Lhankor_Mhy/1zsd30xj/
当方では destyle.css でCSSリセットをしていますので、もしかするとリセットCSSの違いによるのかもしれませんね。
ありがとうございます。
頂いたサンプルでも、私の環境では同様の問題が発生します。
更に、こちらではマウスオーバーしても変化しないですね。
リセットCSSの中身も検討したのですが、あまり関係なさそうで…。
もしかしたら記述やブラウザ環境というより、PC環境や設定などその他の要因かもしれません。
もう一度別の視点で考えてみます。ありがとうございます。
そうすると、あとは、コメント欄にコピペしたときに文字が落ちているということがあるかもしれませんね。
markdownならばある程度のキャラクターを維持してくれますが、コメント欄だと空白文字系がかなり落ちるので。
回答1件
0
ベストアンサー
Header本体にtransitionをかけているようですが、内部のaタグにもかけてみてください。
同じ問題に悩まされたことがありますが、その際はこれで直りました。
投稿2022/04/05 08:28
総合スコア19
あなたの回答
tips
プレビュー
