当鼠标悬停在每个字母上时如何更改字体系列+背景

<span class="letter">A</span>
<span class="letter">B</span>
<span class="letter">C</span>
...

.letter {
  font-family: Arial, sans-serif; /* 设置字体系列 */
  background-color: #ffffff; /* 设置背景颜色 */
}

.letter:hover {
  font-family: Times New Roman, serif; /* 设置鼠标悬停时的字体系列 */
  background-color: #ff0000; /* 设置鼠标悬停时的背景颜色 */
}