Changing color of text in div on hover? - CSS

Question

Basically I have a button which is white but has a purple border and the text is purple and when the user hovers over the image, I want the background-color to be purple and the text to be white. Right now, I can get the background-color to switch from white to purple but I cannot get the text to switch from purple to white. THis is the code that I have at the moment: 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
}

I have no idea why the color:white will not change the color. Any help is greatly appreciated!

Answer 1

Looks like you are missing a semi-colon after color:white, you also may want to consider browser defaults for link visited colors etc. Here is a working demo: 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

It should be noted that an h3 is a block element and a is an inline element. Prior to HTML5 , the correct way to structure this would be with an a wrapped in an h3 , eg:

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

With HTML5 , it is now okay to wrap block elements with a . I would go with something along these lines:

<!-- 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

It is not working because you are applying the style to the entire DIV not the text itself.

Add a id to the <h3>

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

Add this to your css

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

Then just edit the colours you and the position

JSFiddle

Answer 4

in your case, you need to use a great css feature called a direct descendant combinator. ">"

it will be like this :

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

    &:hover {
        background-color:purple;
    }

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

source : treehouse