如何将背景颜色更改为灰色

Question

将鼠标悬停在图标图像上时，背景颜色变为黑色。如何将其更改为灰色？

<h2>Contact Us Anytime!</h2>

        </div>
    </div> </div></section>
 <section  class="container"><div class="row">
    <div class="spb_content_element col-sm-6  column_container">
        <div class="spb-asset-content">
         <section  class="container"><div class="row">
    <div class="spb_icon_box col-sm-12">
        <div class="spb-asset-content">
        <div class="sf-icon-box sf-icon-box-left-icon sf-animation sf-icon- " data-animation="none" data-delay="0" style="background-color:;"><div class="sf-icon-cont cont-small sf-icon-float-none"><i class="fa-map-marker sf-icon sf-icon-small" style="color:;"></i></div><div class="sf-icon-box-content-wrap clearfix"><h3 style="color:;"></h3><div class="sf-icon-box-content" style="color:;">
<p> CT</p>
</div></div></div>
        </div>
    </div> </div></section>

Answer 1

变化：

.sf-hover .sf-icon-cont, .sf-hover .sf-icon-box-hr {
  background-color: #222!important;
}

要：

.sf-hover .sf-icon-cont, .sf-hover .sf-icon-box-hr {
  background-color: #8C8C8C!important;
}

如何像专业人士一样仔细检查CSS

1）右键单击HTML元素 - ＆gt;检查元素

2）右键单击特定的DOM - ＆gt;强制元素状态 - ＆gt; ：悬停

3）*实时播放右侧面板上的CSS，直到您满意为止。

当生活变得复杂时

有时，复杂的程序员决定使用Javascript动态更改CSS。所以第二步无济于事。要解决此问题，您可以悬停所需的元素并见证DOM正在被更改。我看到DOM正在用sf-hover类完成，所以我手动添加了这个类。这就是我能够在右侧使用CSS的方式。