悬停时图标变为白色

Question

我想让图标在它徘徊之后点亮白色，但它似乎无法正常工作。我试过了

.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>

这是显示的输出：

我只想让图标在悬停时变白。我有什么想法，我做错了什么？

Answer 1

您必须在悬停时更改背景图片。

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

Answer 2

您可以准备另一个悬停时显示的图像，具有相同的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;
}

这会在悬停时显示其他图像。