右侧按钮上的箭头消失了。悬停时,蓝色变为浅蓝色,并带有较深的箭头和文本。
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;}
最佳答案
您的 CSS 中有 2 个错误:
.FineHome
应该是.FindHome
a
具有.FindHome
类,并且不是 child ,正如您的 css 假定的那样。您应该将.FindHome a:hover
更改为a.FindHome:hover
或.FindHome:hover
题外话:
我还可以建议您选择的命名方式使事情很难阅读并且难以重用 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;
...
}
关于html - 背景按钮不会悬停在不同的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23849920/