ホバーの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"> \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

私はそれが役立ちます。