मैं फ़ॉन्ट विस्मयकारी पर होवर प्रभाव कैसे जोड़ूं?

Question

मेरे पास कुछ सामाजिक साइट आइकन हैं जो भूरे रंग के हैं। जब आप उन पर होवर करते हैं, तो मैं उन्हें अपने उचित रंग में बदलना चाहता हूं (फेसबुक: नीला, google +: red, आदि)। मैंने इसका लाभ उठाने के लिए इसके साथ खेला है।

<li style="float:left;"> 
     <!-- start social bookmarks --> 
     <div style="font-size: 32px; color: grey;"> 
     <i class="icon-facebook-sign" style="margin-left: 0px;"></i> 
     <i class="icon-twitter-sign" style="margin-left: -12px;"></i> 
     <i class="icon-linkedin-sign" style="margin-left: -12px;"></i> 
     <i class="icon-google-plus-sign" style="margin-left: -12px;"></i> 
     </div> 
     <!-- end social bookmarks --> 
    </li> 

Answer 1

आप इस

.icon-facebook-sign:hover 
{ 
    background-color:blue; 
} 

Answer 2

की तरह कुछ का उपयोग कर सकते कोशिश कर सकते हैं: कोड यह

.icon-facebook-sign:hover{color:lightblue;} 
    .icon-twitter-sign:hover{color:yellow} 

http://jsbin.com/opeyoy/1/

Answer 3

तथ्य यह है कि आप पहले से ही एक डिफ़ॉल्ट है के आधार पर रंग, आप फेसबुक, गूगल प्लस और ट्विटर के लिए इन तीनों का उपयोग कर सकते हैं:

.icon-facebook-sign:hover { 
    color: rgba(59, 89, 152, .7); 
    } 

    .icon-twitter-sign:hover { 
    color: rgba(0, 172, 237, .7); 
    } 

    .icon-google-plus-sign:hover { 
    color: rgba(172, 0, 0, .7); 
    }