【问题标题】: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;
    }
    

    【讨论】:

      猜你喜欢
      • 2013-06-26
      • 2015-11-09
      • 2013-05-28
      • 1970-01-01
      • 2013-11-21
      • 1970-01-01
      • 2015-03-29
      • 1970-01-01
      • 2021-10-29
      相关资源
      最近更新 更多