CODEWITHSUNDEEP
htmlcsstextcolors
mre12345
mre12345

Reputation: 1127

Changing color of text in div on hover? - CSS

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!

Upvotes: 2

Views: 17575

Answers (4)

ahyanarizky
ahyanarizky

Reputation: 11

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

Upvotes: 1

trashr0x
trashr0x

Reputation: 6565

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, e.g.:

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

Upvotes: 3

AnonDCX
AnonDCX

Reputation: 2597

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

Upvotes: 0

Amanda K
Amanda K

Reputation: 78

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;
}

Upvotes: 6

Related Questions