背景按钮不会悬停在不同的颜色答案

【问题标题】：Background button will not hover in different color背景按钮不会悬停在不同的颜色
【发布时间】：2014-07-14 00:50:00
【问题描述】：

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

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

【问题讨论】：

您将 FindHome 拼写为 FineHome。但类名是“FindHome-div”。

标签： html css

【解决方案1】：

您正在将 :hover 应用于 FineHome child a 标签。您正在将 FindHome 设置为您的 a 元素。

改成这样：

.FindHome:hover {background:#ffffff;}

【讨论】：

【解决方案2】：

您的 css 中有 2 个错误：

.FineHome 应该是 .FindHome
a 具有 .FindHome 类，并且 不是孩子，正如您的 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;
         ...
    }

【讨论】：

我怎么拼错了！感谢 CSS 组织！

【解决方案3】：

你应该修复你的选择器并使用：

.FindHome:hover {
    background: #ffffff;
}

【讨论】：