CSS Animating an element while hvoering something else-CodePudding

I've found plenty of answers to this question, but none of them have worked for my case. I can't help but feel I'm missing something basic.

HTML

<nav>
  <a to="#"><i >TEST</i> Home</a>
  <a to="#">About</a>
  <a to="#">Something else</a>
  <div ></div>
</nav>

CSS

nav {
    display: flex;
    margin: auto;
    /* margin-top: 30px; */
    padding: 12px 0;
    position: relative;
    max-width: 800px;
    height: 50px;
    background-color: purple;
    border-radius: 0;
}
nav a {
    height: 100%;
    font-size: 15px;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    color: white;
    cursor: pointer;
}
nav .animation {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
    transition: all 0.5s ease 0s;
}

nav i {
    /* position: absolute; */
    height: 100%;
    top: 0;
    z-index: 0;
    transition: all 0.5s ease 0s;
    color: black;
}

a:nth-child(1) {
    width: 100px;
}
a:nth-child(2) {
    width: 150px;
}
a:nth-child(3) {
    width: 150px;
}

/* somehow invert this color when the nav a element is hovered */
.fa-home {
    color: green;
}
.fa-home:hover {
    color: white;
}
/* I expected this to work, but it doesn't */
nav a:nth-child(1):hover ~ .fa-home {
    background-color: white;
}
nav a:nth-child(1):hover ~ .animation {
    width: 100px;
    left: 0;
    background-color: green;
}
nav a:nth-child(2):hover ~ .animation {
    width: 150px;
    left: 100px;
    background-color: #d3b814;
}
nav a:nth-child(3):hover ~ .animation {
    width: 150px;
    left: 250px;
    background: rgb(249, 11, 70);
}

What I want is for the green TEST text, left of Home, to change colour when hovering the link. I've used the ~ modifier to move the background colour around - but I can't get it to work with the I tag (which is a font-awesome icon, but couldn't get codepen to import it properly).

I'm currently able to turn it white while hovering the I tag, but not the link itself.

Finally, here's the original navbar code for those interested.

CodePudding user response：

The selector is wrong

Change

nav a:nth-child(1):hover ~ .fa-home {
    background-color: white;
}

To this:

nav a:nth-child(1):hover > .fa-home {
    color: white;
}