我正在学习 CSS 并试图找出一种方法，当您将鼠标悬停在页面上的标题元素上时，使正文的背景颜色发生变化。我试图使用每个选择器，但它不起作用！谁能帮我找出我的问题？这是我的代码：
<html>
<style>
#header {
text-align: center;
position: relative;
}
#header:hover ~ .body{
background-color: blue;
}
.body{
background-color: purple;
}
</style>
<body class="body">
<div id="header">
<font size="16">My Header</font>
</div>
</body>
</html>