Làm cách nào để thêm hiệu ứng di chuột vào Phông chữ tuyệt vời?

Question

Tôi có một số biểu tượng trang web xã hội có màu xám. Khi bạn di chuột qua chúng, tôi muốn chúng thay đổi màu thích hợp của chúng (facebook: blue, google +: red, v.v.). Tôi đã chơi với nó, vô ích. Dưới đây là các mã:

<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

Bạn có thể thử một cái gì đó như thế này

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

Answer 2

bạn có thể sử dụng:

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

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

Answer 3

Dựa trên thực tế là bạn đã có một mặc định màu sắc, bạn có thể sử dụng ba thứ này cho facebook, google plus và twitter:

.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); 
    }