親focusで子孫のフォント色を変えたい

css,scss初心者です。

トップページだけヘッダの背景色を変えることになりました。
それに伴いヘッダ内のフォント色も変える必要があります。

やりたいことは、
最初、リンクのフォント色は白色にしておき、
ヘッダにhoverされたら、ヘッダ内にあるリンクのフォント色を青色に変更する、です。

focus、hover時に、

.header__inner > .header__inner__link >.link { color: blue;}

としましたが変わりませんでした。

先輩方教えて下さい。
宜しくお願いします。

html
1        <header class="header top-header-bgcolor">
2			<div class="header__inner">	
3				<div class="header__inner__link">
4					<a href="#" class="link top-header-link">カテゴリ一覧</a>
5				</div>
6			</div>
7		</header>

sass
1.top-header-bgcolor {
2	& :focus, :hover {
3		background-color: #fff;
4        > .header__inner > .header__inner__link >.link { color: blue;}
5
6
7	}
8}
9.top-header-link {
10	color: #fff;
11	text-decoration: underline;
12}

--------以下追加--------
linkクラス

sass
1.link {
2	color: blue;
3	font-weight: bold;
4	&:hover {
5		color: blue;
6		font-weight: bold;
7		text-decoration: underline;
8	}
9}
10

行動規範の内容に同意します

回答1件

ベストアンサー

まず、HTMLの下記がタイポです。

diff
1- <header class="header top-header-bgcolo">
2+ <header class="header top-header-bgcolor">

ヘッダー('.top-header-bgcolor ')にfocusが行くことはないので、
focus で背景色等を変更するなら、a要素に設定する必要があります。
display: block; を設定すれば親要素一杯に広がりますので、
ヘッダーをホバーするのと同じ動作になります。

css
1.top-header-bgcolor {
2  
3  > .header__inner > .header__inner__link > .link{ 
4    &:hover, &:focus { 
5      display: block;
6      background-color: #ff0;
7      color: blue;
8    }
9  }
10}
11.top-header-link {
12  color: #fff;
13  text-decoration: underline;
14}

追記

コメントよりfocusは無視していいということなので、

css
1.top-header-bgcolor {
2  border: 1px solid;
3  &:hover {
4    > .header__inner > .header__inner__link >.link {
5      color: blue;
6//      display: block;
7    }
8  }
9}
10.top-header-link {
11  color: #fff;
12  text-decoration: underline;
13}

リンク範囲も親要素一杯に広下たい場合は、display: block; のコメントを外してください。

投稿2020/12/14 03:38

総合スコア33759

2020/12/14 04:34

回答有難う御座います。そのまま記述しましたが、変わりありませんでした。 >ヘッダー('.top-header-bgcolor ')にfocusが行くことはないので、ヘッダ全体にフォーカスした時にリンク色だけを変えたいのです。ヘッダにフォーカス時、ヘッダ全体が白になるためです。

hatena19

2020/12/14 05:05

まず、フォーカスとホバーは意味が違う、また、既定でフォーカスを持つことができる要素は、aリンク要素とかinput要素など限られていて、header要素はフォーカスを持つことができない。これを理解してますか？そのうえで、 > ヘッダ全体にフォーカスした時にリンク色だけを変えたいのです。これはホバーしたとき（マウスカーソルを要素の上にもってきたとき）という意味でしょうか。それとも、ヘッダー自体にフォーカスを持たせることができるようにしたい、ということでしょうか。まずは、その辺を明確にしてください。

pecchan

2020/12/14 06:51 編集

度々すみません、有難う御座います。フォーカスを持つことができる要素が決まっていること、知りませんでした。フォーカスとホバーの違い調べました。やりたいことは、ホバーの方でした。 <header>上にホバーした時です。 &:hover, &:focusの箇所を、 &:hoverにしましたが同じでした。

hatena19

2020/12/14 06:59

ヘッダー全体をホバーしたときに、ヘッダー全体の背景色は変更せずに、リンク要素の文字色だけを変更したいということでしょうか。その場合、リンク範囲はヘッダー全体に広げなくてもいいのでしょうか。リンク文字以外にホバーしたとき、リンク文字色は変更されるが、クリックしても反応しないというのはユーザーが戸惑いますよね。

pecchan

2020/12/14 09:37

いえ、ヘッダ全体はホバー時に background-color: #fff; で白色背景にしてます。

hatena19

2020/12/14 09:54

ホバー前はどのような設定でしょうか。

pecchan

2020/12/14 22:14

有難う御座います。ホバー前ですが、ヘッダは特に何も実装してません。 linkクラスは追加致しました。

hatena19

2020/12/15 05:53

回答にコードとサンプルを追加しました。これでご希望にあってますか。