更改图片内部div（带边框）上的悬停

Question

我有div和里面的div是来自“字体真棒”的图标。它是白色背景圈和里面圈黄色图标。悬停圆圈将背景颜色更改为黄色，其内部的图标颜色更改为白色。

现在我需要更改不在“Font awesome”库中的图标图片，并且需要将它保留在中心位置并悬停在主div变色上。

这里是我的解决方案，它是不工作的权利

.imgBox { 
 
    margin-left: 30%; 
 
    width: 191px; 
 
    height: 191px; 
 
    background: url(../images/greenhouse.png) no-repeat; 
 
} 
 

 
.imgBox:hover { 
 
    width: 191px; 
 
    height: 191px; 
 
    background: url(../images/greenhouse2.png) no-repeat; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> \t 
 
    <div class="col-md-4 services-icon" onclick="parnik()"> 
 
    <div class="services-icon-info"> 
 
     <div class="imgBox"></div> 
 
    </div> 
 
    <div class="services-icon-text"> 
 
     <h4>Парники </h4> 
 
    </div> 
 
    </div> 
 
</div>

CSS类 “服务图标，信息”

.services-icon-info { 
 

 
\t width: 80px; 
 

 
    height: 80px; 
 

 
    background: #FFFFFF; 
 

 
    text-align: center; 
 

 
    color: #FFC107; 
 

 
    font-size: 2em; 
 

 
    padding: .6em 0 0 0; 
 

 
    border-radius: 50%; 
 

 
\t -webkit-border-radius: 50%; 
 

 
\t -moz-border-radius: 50%; 
 

 
\t -ms-border-radius: 50%; 
 

 
\t -o-border-radius: 50%; 
 

 
    margin: 0 auto; 
 

 
\t transition: 0.5s all; 
 

 
\t -webkit-transition: 0.5s all; 
 

 
\t -o-transition: 0.5s all; 
 

 
\t -moz-transition: 0.5s all; 
 

 
\t -ms-transition: 0.5s all; 
 

 
} 
 

 

 
.services-icon:hover div.services-icon-info { 
 

 
background: #FFC107; 
 

 
color: #FFFFFF; 
 

 
}

这是如何工作的，现在（忽略左侧边框，我添加了100px的每一面，但也仅限向下和向右）： 为

Answer 1

一种方法是使用一个透明的PNG图像

.image-icon{ 
    background-color:#fff; 
    border-radius:100px; // to make it circle 
    margin:0 auto;  // to align it in center of container 
    width:191px; 
    height:191px; 
    background: url(../images/greenhouse-white.png) no-repeat center center; // white image icon 
} 
.image-icon:hover{ 
    background-color:#f90;         // orange background color 
    background-image: url(../images/greenhouse-orange.png); // orange image icon; 
} 

HTML可以像你已经拥有

<div class="services-icon-info"> 
    <div class="imgBox"></div> 
    <h3>Title of box</h3> 
</div> 

看到它在行动了e请： https://codepen.io/FaridNaderi/pen/PjVoOM

我希望它有帮助。