javascript - 将鼠标悬停在 id 上时会更改图像

Question

我有 9 个“div，设计如下: 1 2 3 4 5 6 7 8 9

我想做的是当鼠标悬停在数字 5 div 上时它会显示图像，当我悬停在任何其他 div (1,2,3,4,6,7,8,9) 上时它会在 num 5 div 上显示不同的设计。

	<div class="flex-container" id="container">
		<div class="child" id="coop" ></div>
		<div class="child" id="wai"></div>
		<div class="child" id="educ"></div>
		<div class="child" id="tech"> </div>
		<div class="parent" id="index"></div>
		<div class="child" id="pmo"></div>
		<div class="child" id="hobby"></div>
		<div class="child" id="cook"></div>
		<div class="child" id="cont"></div>
	</div>

我更喜欢使用 css，因为我还缺乏 js 的经验。

Answer 1

div{
    width: 100%;
    height: 15px;
    cursor: pointer;
    background: red;
    
}
.flex-container:hover div:nth-child(5){
  background: yellow;
}
.flex-container div:nth-child(5):hover{
    background-image:url(https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg?sz=32);
}

<div class="flex-container" id="container">
		<div class="child" id="coop" ></div>
		<div class="child" id="wai"></div>
		<div class="child" id="educ"></div>
		<div class="child" id="tech"> </div>
		<div class="parent" id="index"></div>
		<div class="child" id="pmo"></div>
		<div class="child" id="hobby"></div>
		<div class="child" id="cook"></div>
		<div class="child" id="cont"></div>
	</div>