CODEWITHSUNDEEP
htmlcss
Christian Luneborg
Christian Luneborg

Reputation: 511

Background button will not hover in different color

And the arrow on the right button disappeared. When hovered the blue color changes to a lighter blue with darker arrow and text.

HTML

<div class="fluid FindHome-div">
    <h1>
        <a href="http://www.ntreisinnovia.net/ntr/idx/index.php?key=b74b4ef49443e4ac6699324016bbaec5" class="FindHome" target="_blank">Find your home</a>
    </h1>
 </div>

CSS

.FindHome {
     background-color:#09F; 
     width:300px; 
     border:1px solid #09F;      
     padding:10px 40px 10px 15px;  
     border-radius:5px; 
     display:block; 
     margin-left:auto; 
     margin-right:auto;   
     background: #09F url('../img/arrow.png') no-repeat; 
     background-position:320px center;   
     margin-bottom:35px; 
     overflow: hidden; 
     text-decoration:none; 
     color:#ffffff;
 }

.FineHome a:hover {background:#ffffff;}
.FindHome-div{display:inline-block;}

JSFIDDLE

Upvotes: 0

Views: 68

Answers (3)

Pevara
Pevara

Reputation: 14310

There are 2 mistakes in your css:

  • .FineHome should be .FindHome
  • The a has the class .FindHome, and is not a child as your css presumes. You should change .FindHome a:hover to a.FindHome:hover or .FindHome:hover

http://jsfiddle.net/nA4P9/11/

Off topic:
May I also suggest that your choice of naming makes things quite hard to read and difficult to reuse imo. I would go for something like this:

HTML

 <div class="fluid find-home">
    <h1>
        <a href="..." class='cta-button' target="_blank">Find your home</a>
    </h1>
 </div>

css 

 .cta-button {
         background: #09F; 
         ...
     }
    .cta-button:hover {
         background: #fff;
         ...
    }
    .find-home {
         display: inline-block;
         ...
    }

Upvotes: 1

Artem Petrosian
Artem Petrosian

Reputation: 2954

You should fix your selector and use:

.FindHome:hover {
    background: #ffffff;
}

Upvotes: 1

Anthony Bobenrieth
Anthony Bobenrieth

Reputation: 2884

You re applying the :hover to FineHome child a tag. And your are setting FindHome to your a element.

Change to this:

.FindHome:hover {background:#ffffff;}

Upvotes: 1

Related Questions