当鼠标悬停在一个元素上时如何影响其他元素

9 浏览
0 Comments

当鼠标悬停在一个元素上时如何影响其他元素

我想要的是当鼠标悬停在特定的

上时，它会影响另一个

的属性。

例如，在这个JSFiddle演示中，当你悬停在#cube上时，它会改变background-color，但是我想要的是当我悬停在#container上时，#cube会受到影响。

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}








								
admin 更改状态以发布 2023年5月23日
							

							

															

						

						
0

					

				


			


			
			

	

		

			

				2
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
在这个特定的例子中，你可以使用:\n


#container:hover #cube {
    background-color: yellow;   
}



\n这个例子只能在cube是container的子元素时才有效。对于更复杂的情况，你需要使用不同的CSS或者使用JavaScript。

									

				

									

			

			
0

		

	



											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
如果立方体直接在容器内部：




#container:hover > #cube { background-color: yellow; }





如果立方体在容器后面（容器闭合标记之后）：




#container:hover + #cube { background-color: yellow; }





如果立方体在容器的某个位置内部：




#container:hover #cube { background-color: yellow; }





如果立方体是容器的兄弟节点：




#container:hover ~ #cube { background-color: yellow; }




									

				

									

			

			
0