CSSを教えて下さい webデザイナーの職業訓練に通うコーディング初心者です。 サイトを作っていまし

CSSを教えて下さい
webデザイナーの職業訓練に通うコーディング初心者です。

サイトを作っていまして

divにhover→filter:brightnessで暗くなるようにしたのですが
divの中に入っている a (colorは白)も一緒にfilterが効いて暗くなり、グレーになってしまいます。
divの背景だけにfilterを効かせる方法はないでしょうか？
参考にサイト見ていると、マウスを載せると中の文字はそのままで、背景だけ暗く変わるサイトがいっぱいありますが、検証画面見てもhoverのスタイルがでてこないのでわかりません。
htmlはざっくりこんな感じです。↓

〈div class=○○〉
〈a〉ここも暗くなってしまいます。〈/a〉
〈/div〉

CSSは基本しか習っていないのでプロパティや擬似クラス？等知らないものが多いです。
よろしくお願いします。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2024/09/19 15:50

こんにちは

親要素にfilterを適用すれば、子要素も含めた全体に適用されます。

＞マウスを載せると中の文字はそのままで、背景だけ暗く変わる
＞サイトがいっぱいありますが～
背景と言うのが、「背景色」の意味で良いのならば、filterを使わずに背景色だけを変えれば良いでしょう。
　.○○ { background-color: blue; }
に対して
　.○○:hover { background-color: red; }
などとしておけば、表示色ほかを変えることなく、背景色のみを変更できます。


「そういう意味じゃなく、諸々のものにfilterをかけたいので、filterでなくてはならないの！」と言うのであれば、
filterを適用したいものとそうでないものを別要素にしておけば良いでしょう。
例えば、HTMLを
　<div class="○○">
　　<div>ここにfilterを適用する内容</div>
　　<a>ここはfilter適用範囲外</a>
　</div>
のようにしておいて。
　.○○ { position: relative; }
　.○○ > a { position: absolute; top: 0; }
等としておけば、リンク要素はdiv要素の上に重ねて表示されます。
（リンク要素の高さは、親要素の計算からは外されますのでご注意）
その上で、
　.○○:hover > div { filter:brightness(0.4); }
等としておくことで、.○○ > div要素にだけfilterが適用され、リンク要素には適用されないようになります。

No.1 回答者： lv4u 回答日時： 2024/09/19 08:15

私も、Webのコーディングをやっているとき、CSSはよくわかりませんので、書籍を買って読んでもあまり分からず、敬遠していました。

たぶん、CSSだけ勉強しても、理解しずらい部分がある気がします。

クライアント側で動作するhtml、JavaScript、BootStrap、JQueryと、サーバ側で動作するJavaやPHPなどを一通り勉強すれば、判るようになると思います。
なお、クライアント側の動作に関しては、ブラウザごとの違い、バージョンごとの違いなどあって、「このブラウザでは正しく動作するが、あっちのブラウザでは正しく動作しない」ってこともありますので、思うように動作しないことがあっても、あまり深追いしないほうがいいのかもしれません。