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

Question

css,scss初心者です。

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

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

focus、hover時に、

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

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

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

        <header class="header top-header-bgcolor">
			<div class="header__inner">	
				<div class="header__inner__link">
					<a href="#" class="link top-header-link">カテゴリ一覧</a>
				</div>
			</div>
		</header>

.top-header-bgcolor {
	& :focus, :hover {
		background-color: #fff;
        > .header__inner > .header__inner__link >.link { color: blue;}


	}
}
.top-header-link {
	color: #fff;
	text-decoration: underline;
}

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

.link {
	color: blue;
	font-weight: bold;
	&:hover {
		color: blue;
		font-weight: bold;
		text-decoration: underline;
	}
}

Answer 1

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

- <header class="header top-header-bgcolo">
+ <header class="header top-header-bgcolor">

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

.top-header-bgcolor {
  
  > .header__inner > .header__inner__link > .link{ 
    &:hover, &:focus { 
      display: block;
      background-color: #ff0;
      color: blue;
    }
  }
}
.top-header-link {
  color: #fff;
  text-decoration: underline;
}

追記

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

.top-header-bgcolor {
  border: 1px solid;
  &:hover {
    > .header__inner > .header__inner__link >.link {
      color: blue;
//      display: block;
    }
  }
}
.top-header-link {
  color: #fff;
  text-decoration: underline;
}

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

CodePenサンプル

Comments

[pecchan]

回答有難う御座います。

そのまま記述しましたが、変わりありませんでした。

>ヘッダー('.top-header-bgcolor ')にfocusが行くことはないので、
ヘッダ全体にフォーカスした時にリンク色だけを変えたいのです。
ヘッダにフォーカス時、ヘッダ全体が白になるためです。

[hatena19]

まず、フォーカスとホバーは意味が違う、
また、既定でフォーカスを持つことができる要素は、aリンク要素とかinput要素など限られていて、header要素はフォーカスを持つことができない。
これを理解してますか？
そのうえで、

> ヘッダ全体にフォーカスした時にリンク色だけを変えたいのです。

これはホバーしたとき（マウスカーソルを要素の上にもってきたとき）という意味でしょうか。
それとも、ヘッダー自体にフォーカスを持たせることができるようにしたい、ということでしょうか。

まずは、その辺を明確にしてください。

[pecchan]

度々すみません、有難う御座います。
フォーカスを持つことができる要素が決まっていること、知りませんでした。

フォーカスとホバーの違い調べました。

やりたいことは、ホバーの方でした。
<header>上にホバーした時です。

&:hover, &:focusの箇所を、
&:hoverにしましたが同じでした。

[hatena19]

ヘッダー全体をホバーしたときに、
ヘッダー全体の背景色は変更せずに、
リンク要素の文字色だけを変更したいということでしょうか。

その場合、リンク範囲はヘッダー全体に広げなくてもいいのでしょうか。

リンク文字以外にホバーしたとき、リンク文字色は変更されるが、クリックしても反応しないというのはユーザーが戸惑いますよね。

[pecchan]

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

[hatena19]

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

[pecchan]

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

[hatena19]

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

[pecchan]

最後までお付き合いいただき有難う御座いました。