html - 背景按钮不会悬停在不同的颜色

Question

右侧按钮上的箭头消失了。悬停时，蓝色变为浅蓝色，并带有较深的箭头和文本。

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

Answer 1

您的 CSS 中有 2 个错误:

• .FineHome 应该是 .FindHome
• a 具有 .FindHome 类，并且不是 child ，正如您的 css 假定的那样。您应该将 .FindHome a:hover 更改为 a.FindHome:hover 或 .FindHome:hover

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

题外话:
我还可以建议您选择的命名方式使事情很难阅读并且难以重用 imo。我会选择这样的东西:

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