How to change one element style when another is hovered (repost) [duplicate] - css

Question

This question already exists:
How to change one element style when another is hovered [closed]
Closed 8 months ago.
Sorry for making things unclear last time, it really was code dump because I didn't know how to explain what was happening. Good news, I fixed it now. However now I a problem with CSS. I am trying to change background colour of a table row () when hovered over a button (my code doesn't work). The css is provided below. The problem is at the buttom of the CSS (the two hover styles): Please tell me what I am doing wrong, I searched for answers for so long however I have not come up with a proper solution.
body{
margin: 0px;
font-family: Helvetica;
}
header{
background-color: #e7e7e7;
height: 100px;
padding-top: 25px;
text-align: center;
font-size: 50px;
}
table{
background-color: white;
border-collapse: collapse;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
#myTable{
margin-top: 50px;
}
th,td{
padding: 20px;
text-align: center;
border:1px solid black;
width: 200px;
height: auto;
}
.nthChild{
background-color: #e7e7e7;
}
#nlRow th{
border-top: 0px;
}
input{
font-size: 20px;
width: 100%;
padding: 5px 0px;
border-radius: 4px;
}
#numeracyCredits, #literacyCredits{
width: 30%;
}
.button{
font-size: 20px;
padding: 5px 20px;
width: 15%;
border-radius: 4px;
background-color: white;
color: black;
border: 2px solid black;
transition-duration: 0.3s;
}
.button:hover{
background-color: #c4c2c2;
transition-duration: 0.3s;
}
.button:hover + .nthChild{
background-color: white;
}

Answer 1

the .nthChild of what? you should put the parent or whatever from that .nthChild. Or else if you give it a class or an id use that in stead of .nthChild then it should work.