更改圖片內部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

我希望它有幫助。