html - 使整个 div 在悬停时发生变化

Question

我让图像悬停正常工作，但它只会在悬停时改变颜色。就像，我希望 div 一旦悬停，它就会改变图像。

我不想将鼠标悬停在图像本身上，它只会发生变化，这就是它正在做的事情。

HTML:

<div class="navigation-box">                                    
        <div class="sidehead"><i class="lock"></i>header 1</div>                                
            <div class="navLinks">
                <ul class="">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>          
</div>      

CSS:

.lock {
    background: url('../images/lock.png') no-repeat center;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    margin-top:-5px;
    margin-left:5%;
}

li:hover .lock{
    background: url("../images/lock-hover.png") no-repeat center;    
}

Fiddle

在 fiddle 中，您会明白我在说什么。我只是希望 div sidehead 一旦悬停在上面，就可以更改 lock 图像。知道我做错了什么吗？

Answer 1

您的选择器略有错误。

如果您希望在将鼠标悬停在 .sidehead div 上时发生某些事情，您必须将鼠标悬停在该位置

.sidehead .lock {
    background: url('http://uploadir.com/u/il2433z4') no-repeat center;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    margin-top:-5px;
    margin-left:5%;
}
.sidehead:hover .lock {
    background: grey url("http://uploadir.com/u/4js58y48") no-repeat center;
}
.sidehead {
    border:1px solid green; /* for visual refernece */
}

<div class="navigation-box">
    <div class="sidehead"><i class="lock"></i>header 1</div>
    <div class="navLinks">
        <ul class="">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>