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

您正在应用：将鼠标悬停在FineHome 孩子标记上。您正在将FindHome设置为 a 元素。

更改为：

.FindHome:hover {background:#ffffff;}

Answer 2

你的css中有2个错误：

.FineHome应为.FindHome
{c}假设a有.FindHome类，不是孩子。您应该将.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;
         ...
    }

Answer 3

您应该修复选择器并使用：

.FindHome:hover {
    background: #ffffff;
}

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

3 个答案: