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
}

我不知道为什么颜色：白色不会改变颜色。非常感谢任何帮助！

Answer 1

看起来您在颜色后缺少分号：白色，您还可能需要考虑链接访问颜色的浏览器默认值等。这是一个有效的演示：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;
}

Answer 2

应该注意，h3是块元素，a是内联元素。在HTML5之前，正确的结构方法是将a包裹在h3中，例如：

<h3><a href="#">Learn More</a></h3>

使用HTML5，现在可以使用a包装块元素。我会沿着这些方向做点什么：

<!-- CSS -->
<style>
    a.learnMore {
      text-decoration: none;
      text-transform: uppercase;
      color: purple;
    }
    a.learnMore h3 {
      border: 1px solid purple;
      padding: 10px;
      text-align: center;
    }
    a.learnMore h3:hover {
      background-color: purple;
      color: white;
    }
</style>

<!-- HTML -->
<a href="index.php?page=learnmore" class="learnMore"><h3>Learn More</h3></a>

a.learnMore {
    text-decoration: none;
    text-transform: uppercase;
    color: purple;
}

a.learnMore h3 {
    border: 1px solid purple;
    padding: 10px;
    text-align: center;
}

a.learnMore h3:hover {
    background-color: purple;
    color: white;
}

<a href="index.php?page=learnmore" class="learnMore"><h3>Learn More</h3></a>

Answer 3

它无效，因为您将样式应用于整个DIV而不是文本本身。

将F.Promise添加到id

<h3>

将此添加到您的css

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

然后只需编辑你的颜色和位置

JSFiddle

Answer 4

在你的情况下，你需要使用一个很棒的CSS功能，称为直接后代组合。＆＃34;＆GT;＆＃34;

会是这样的：

<div class="container" style="display: none;">  
    <div id="show_finyear" style="display: none;">2017-18</div> 
</div>

来源：treehouse

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

4 个答案: