Question

我正在尝试将我的徽标悬停在鼠标悬停上，但它无效。我有两张图片上传到我的服务器。这是代码而她是url.What是错的？

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

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

如何让我的图像悬停？

2 个答案: