如何使我的图像悬停？

Question

我试图让我的徽标悬停在鼠标悬停上，但它不起作用。我有两张图片上传到我的服务器。这是代码，她是网址。有什么问题吗？

http://arabic001.com

<div id='logo'>
            <a href="/index.html">
                <img src="/images/logo001H.png" style="display:none">
                <img src="/images/logo001.png"
                    onMouseOver="this.src='/images/logo001H.png'" 
                    onMouseOut="this.src='/images/logo001.png'">
            </a>
        </div>
#logo {
    position:absolute;  
    text-align:center;
    top:20px;
    right:10px;
    height:150px;
    width:150px;
    cursor:pointer;
}

Answer 1

我不是 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 的...

Answer 2

我建议你使用 css sprites。

http://css-tricks.com/158-css-sprites/

你的html代码将如下所示：

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

和 css 代码：

#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;
}

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