iタグとaタグhover時に別々の色にしたい

Question

初質問です。

リンクを含んだ文字(検索)をhoverした時に iタグのアイコンと、aタグの検索　という部分別々の色にしたいです。
font awsome つかっています。
html

<nav id="nav"> <ul> <li><a href="#"><i class="fa-solid fa-magnifying-glass"></i>検索</a></li> </ul> </nav>

css

<style> #nav li i:hover{color:#ff0000;} #nav li a:hover{color:#000;} </style>

試したこと

今の状態だとアイコンに触れていれば確かに色は変化するのですが、文字にのみカーソルが
触れてるときはアイコンは色が変わりません。

iじゃなくて、li:hoverにしてa:hoverに!inportantつけてみたりしましたがうまくいかず
#nav li i:hover + a:hover　これな気もしたんですがうまく行かず
なんとなくaタグの文字に触れてるときにiの色を変化させたいなら、:hover:before？とかって頭ではこうしてみたいっていうものをうまく文字に起こせません。
もしよろしければ、ご教授いただきたいです。
よろしくお願いします！

補足

<link href="https://use.fontawesome.com/releases/v6.1.0/css/all.css" rel="stylesheet">

Answer 1

#nav li a:hover i {
  color:#ff0000;
}

で可能かと思います。#nav li:hover i でも大丈夫なはずです。

Comments

[meiriairia]

無事にできました。
教えていただきありがとうございます！！！