如何让我的图像悬停？

我想让我的标志悬停在mouseover上，它不工作。我有两个图像上传到我的服务器。这里是代码，她是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; 
}

来源

2011-12-04 L1900

不是你的问题的答案 - 但：#wrapper的绝对定位是一个非常糟糕的主意让你的网站在小浏览器窗口中完全无法访问。 – ptriek

非常感谢你这个提示。我刚刚在刚才提到的问题上遇到了定位问题。在解决之前，我正在等待解决一些其他问题。定位我的包装的最佳方式是什么，以便小浏览器窗口不会切断顶部？ – L1900

我只是坚持定期定位 - 只需添加'margin：0px auto'的水平居中 - 这样小屏幕上的访问者仍然可以使用滚动条。我明白你想要中央定位，但由于你的设计很大，这不是一个好主意。 – ptriek

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

来源

2011-12-04 23:06:53 ptriek

与Alexanders相同的解决方案，只是稍逊一点。 – ptriek

使用CSS精灵。

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

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

来源

2011-12-04 23:07:59

如何让我的图像悬停？

回答

相关问题