如何讓我的圖像懸停？

我想讓我的標誌懸停在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

如何讓我的圖像懸停？

回答

相關問題