悬停时更改div中文本的颜色？- CSS

Question

基本上我有一个白色但有紫色边框的按钮，文本是紫色的，当用户将鼠标悬停在图像上时，我希望背景颜色为紫色，文本为白色。现在，我可以让背景颜色从白色切换到紫色，但我无法让文本从紫色切换到白色。这是我目前拥有的代码：HTML：

<a href="index.php?page=learnmore"><div class="learnMore"><h3>LEARN MORE</h3></div></a>

CSS：

.learnMore {

width:140px;
height:35px;
border:1px solid purple;
margin:0 auto;
}

.learnMore:hover {
background-color:purple;
color:white
}

我不知道为什么 color:white 不会改变颜色。任何帮助是极大的赞赏！

Answer 1

看起来您在 color:white 之后缺少分号，您可能还需要考虑链接访问颜色等的浏览器默认值。这是一个工作演示：codepen demo

.learnMore {
  background-color: white;
  width:140px;
  height:35px;
  border:1px solid purple;
  margin:0 auto;
  color: purple;
}

.learnMore:hover {
  background-color:purple;
  color:white;
}