Html 我试图使我的标志改变时，在css悬停

当我将鼠标悬停在网页上方时，我很难使网页顶部的徽标发生变化

更具体地说，我在我的页面顶部有一个徽标，当用户悬停在上面时，我创建了另一个稍微不同的徽标

这是我的密码：

#top{
width:1366px;
height:100px;
background-color:#1e125b;
}

body{
    background-color:white;
    background-repeat:repeat;
    margin: 0;
}

#top:hover{
background-image: url('Logo_hover.png');
}

Logo_hover会在整个div中自我放大，而不是简单地更改初始图像。我知道我不应该使用背景图像解决此问题，但我似乎找不到任何其他解决方案。

#top:hover{ 背景图片：url（'Logo_hover.png'）； 背景重复：无

---

}你用过this.onmouseover&this.onmouseout吗

.logo{
背景图像：url（“http://placehold.it/120x120&text=image1");
背景重复：无重复；
高度：120px；
宽度：120px；
}
.徽标：悬停{
背景图像：url（“http://placehold.it/120x120&text=image2");
背景重复：无重复；
高度：120px；
宽度：120px；
}

---

创建一个plunkr和shareI仍然存在相同的问题。我现在要做的是创建两个单独的div。一个用于顶部，一个用于徽标。这样可能会更有效。谢谢以利亚的帮助。

#top{

        background-image: url(logo.png); 
        background-repeat: no-repeat;
        background-size: cover;
        overflow:hidden;
        width: 120px;
        height: 120px;


}
#top:hover{

        background-image: url(logo_hover.png);
}