html - 悬停时更改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;
}