javascript - 悬停时更改 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>

类“服务图标信息”的 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

希望对你有帮助。