Css 如何使图像悬停？

我试图使我的标志悬停在鼠标上方，但它不起作用。我有两个图像上传到我的服务器。这是代码，她是url。怎么了

#标志{
位置：绝对位置；
文本对齐：居中；
顶部：20px；
右：10px；
高度：150像素；
宽度：150px；
光标：指针；
}

我不是Javascript专家，但我不会为此使用Javascript

尝试以下CSS：

a.logo { /* and add class="logo" to the a-element */
    display:block;
    width:150;
    height:105px;
    background:url(/images/logo001H.png) no-repeat;
}    
a.logo:hover {
    background:url(/images/logo001.png) no-repeat;
}

---

并删除img…。

我建议您使用css精灵

您的html代码将如下所示：

<div id='logo'>
    <a href="/index.html"></a>
</div>

---

您的最终图像将同时包含两个图像：默认图像和悬停图像。

这不是对您问题的回答，但是：#wrapper的绝对位置是一个非常糟糕的主意，这会使您的站点在小型浏览器窗口上完全无法访问。非常感谢您提供此提示。我一直对你刚才提到的定位问题有困难。在我开始之前，我一直在等待解决其他一些问题。放置包装器的最佳方式是什么，这样小的浏览器窗口就不会切断顶部？我只需坚持常规的定位，并使用“margin:0px auto”添加水平居中，这样小屏幕上的访问者仍然可以获得滚动条。我知道你想要中心定位，但由于你的设计很大，这不是一个好主意。

<div id='logo'>
    <a href="/index.html"></a>
</div>

#logo a{ 
    text-align:center;
    top:20px;
    right:10px;
    height:150px;
    width:150px;
    cursor:pointer;

    background: url(/images/logo.png) no-repeat;
    display: block;
}
#logo a:hover{
    background-position: 0 -150px;
}