前提

cssの質問です。下記の状況だと、マウスでホバーすると、liタブだけ、aタブだけ、iタブだけが反応してしまいます。
どうやって、全要素を:hoverすることができるのですか？

どうぞよろしくお願いいたします。

実現したいこと

入れ子になっている全要素を:hoverしたい

該当のソースコード

ソースコード
HTML
<ul class="footer-btn-wrap">
   <li class="footer-button"><a href="#">サンプル１<i class="fas fa-arrow-right" aria-hidden="true"></i></a></li>
   <li class="footer-button"><a href="#">サンプル２<i class="fas fa-arrow-right" aria-hidden="true"></i></a></li>
   <li class="footer-button"><a href="#">サンプル３<i class="fas fa-arrow-right" aria-hidden="true"></i></a></li>
</ul>

CSS
.footer-button:hover,
.footer-button a:hover {
  background-color: #2da690 ;
}

.fa-arrow-right:hover {
  color: #f5f5f5;
}

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

回答2件

ベストアンサー

footer-buttonをホバーしたときに
aタグの背景色とiタグのカラーを変更したいということでしょうか？

CSS
1.footer-button:hover,
2.footer-button:hover a{
3  background-color: #2da690 ;
4}
5
6.footer-button:hover .fa-arrow-right {
7  color: #f5f5f5;
8}

投稿2022/05/23 06:46

gogoweb_ikeda

総合スコア1426

kinoemon13

2022/05/23 07:19

そうです！現状は一部分しか反映されていないのでここに質問していただきました。

kinoemon13

2022/05/24 07:49

ありがとうございます。 hoverの書き方を身につけることができました！

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

css
1.footer-btn-wrap:hover{

ということですか？

liにhover

liにhoverするとaの背景色とiの文字色がかわるということですよね？

css
1<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
2<style>
3.footer-button:hover a{
4  background-color: #2da690 ;
5}
6.footer-button:hover .fa-arrow-right{
7  color: #f5f5f5;
8}
9</style>
10<ul class="footer-btn-wrap">
11   <li class="footer-button"><a href="#">サンプル１<i class="fas fa-arrow-right" aria-hidden="true"></i></a></li>
12   <li class="footer-button"><a href="#">サンプル２<i class="fas fa-arrow-right" aria-hidden="true"></i></a></li>
13   <li class="footer-button"><a href="#">サンプル３<i class="fas fa-arrow-right" aria-hidden="true"></i></a></li>
14</ul>
15

投稿2022/05/23 06:30

編集2022/05/23 07:45

yambejp

総合スコア114821

kinoemon13

2022/05/23 06:37

違います、分かりにくくて申し訳ございません。 liタブ内の全要素をhoverしたいです。

yambejp

2022/05/23 06:39

意味がつたわってこないので図示してください

kinoemon13

2022/05/23 07:25

<li class="footer-button"><a href="#">サンプル１</a></li> <li class="footer-button"><a href="#">サンプル２</a></li> <li class="footer-button"><a href="#">サンプル３</a></li> liタブ内のaタブやiタブにhoverする際に、同時に反映させていきたいのです。現状は一部分しか反映されていないのです。

yambejp

2022/05/23 07:51 編集

誤解があったので追記しましたただ、liへのhoverになるのでaよりはみ出した部分でも反応してしまいます。 aかiにのみ反応してほしいのでしょうか？

kinoemon13

2022/05/23 09:58 編集

liタブの中、つまりaタブとiタグを同時にhoverしたいですややこしくなってしまって申し訳ございません。

yambejp

2022/05/23 10:32

> aタブとiタグを同時にhover おっしゃる意味がさっぱりわかりません上位のliにhoverではだめなのでしょうか？

kinoemon13

2022/05/23 10:46

すみません、訂正させてください。今、おっしゃる通りやってみたら現状と変わらなかったのでやはり、liタグを含めたhoverにしたいです申し訳ありません