在悬停时更改div（带边框）内的图片

Question

我有div，div里面是“Font Awesome”的图标。它是白色背景圈子和里面圈子黄色颜色象。在悬停圈上，将背景颜色更改为黄色，并将其中的图标更改为白色。

现在我需要更改不在“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">	
  <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>

类“services-icon-info”的CSS

.services-icon-info {

	width: 80px;

    height: 80px;

    background: #FFFFFF;

    text-align: center;

    color: #FFC107;

    font-size: 2em;

    padding: .6em 0 0 0;

    border-radius: 50%;

	-webkit-border-radius: 50%;

	-moz-border-radius: 50%;

	-ms-border-radius: 50%;

	-o-border-radius: 50%;

    margin: 0 auto;

	transition: 0.5s all;

	-webkit-transition: 0.5s all;

	-o-transition: 0.5s all;

	-moz-transition: 0.5s all;

	-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>

请在此处查看： https://codepen.io/FaridNaderi/pen/PjVoOM

我希望它有所帮助。