在懸停時更改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;
}

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，而不是文本本身。

向<h3>添加id

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

將此添加到您的CSS

    #t:hover{
    text-decoration: none;    
    font-family: Verdana;
    text-decoration: none;
    color:#FF0000;
}

然后只需編輯您的顏色和位置

的jsfiddle

Answer 4

在您的情況下，您需要使用一個很棒的CSS功能，稱為直接后代組合器。 “>”

它會是這樣的：

.learnMore {
    width:140px;
    height:35px;
    border:1px solid purple;
    margin:0 auto;

    &:hover {
        background-color:purple;
    }

    &:hover > h3 {
        color: #fff;
    }
}

來源： 樹屋