讓圖標在懸停時變成白色

我希望圖標在懸停後亮起白色，但似乎不起作用。我試過讓圖標在懸停時變成白色

.lock:hover { 
    color: white; 
}

但它沒有工作。有任何想法嗎？

CSS：

.lock { 
    background: url('https://cdn3.iconfinder.com/data/icons/simplius-pack/512/pencil_and_paper-16.png') no-repeat center; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    vertical-align: middle; 
    margin-top:-5px; 
} 

.subMenu-link { 
    list-style: none; 
    padding-left: 30px; 
} 

li.subMenu span{ 
    font-weight: 600; 
    font-size: 14px; 
} 

.subMenu:hover { 
    background: #191919; 
}

HTML：

<li class="subMenu"> 
    <i class="lock"></i> 
    <span>User Account</span>         
</li>

下面是它顯示輸出： enter image description here

我只是單純的想的圖標，將鼠標懸停變白。任何想法是什麼，我做錯了？

來源

2014-10-17 kris

顏色CSS屬性不會更改圖像的顏色。如果它是一個透明的圖像，你可以改變背景顏色。 – j08691 2014-10-17 01:57:04

您必須在懸停時更改背景圖像。

.lock:hover { 
background: url('urIcon.jpg'); 
// styles 
}

來源

2014-10-17 02:03:25 invinciblejai

這很有道理，跆拳道是我的想法！謝謝！ – kris 2014-10-17 02:06:57

歡迎，它發生！ – invinciblejai 2014-10-17 02:10:32

雖然我有一個快速的問題。一旦我將光標直接懸停在圖像上，而不是整個「li」框，它是如何改變圖像的？ http://jsfiddle.net/67byoqr9/1/ – kris 2014-10-17 02:18:31

你可以準備其他圖像徘徊時顯示，以相同的CSS屬性

.lock:hover { 
    background: url("some/other/image") no-repeat center; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    vertical-align: middle; 
    margin-top:-5px; 
}

徘徊時，這會顯示一些，其他的圖像。

來源

2014-10-17 02:07:24

雖然我有一個快速的問題。一旦將光標直接懸停在圖像上，而不是整個li盒子，它是如何改變圖像的？ jsfiddle.net/67byoqr9/1 – kris 2014-10-17 02:19:07

我認爲這是因爲類「鎖」不是整個李塊，只是在小圖像本身。 – 2014-10-17 05:44:58

讓圖標在懸停時變成白色

回答

相關問題