無法獲取背景圖像鼠標懸停在圖像

我想在照片上懸停一個帶有標題的透明PNG。當我給div的位置：絕對或指定的寬度懸停消失。但是，如果我不這樣做，那麼懸停顯示在圖像的右側和左側。無法獲取背景圖像鼠標懸停在圖像

我顯然做錯了什麼，但只是無法弄清楚什麼。任何幫助，將不勝感激。

謝謝！

這裏是網站和相關的代碼。

網站：http://www.theshalomimaginative.com/

<div id= "logo"> 
<h3><img src="Graphics/splashpagelogo.png" alt="The Shalom Imaginative Documentary Photography" /></h3> 
</div> 


#logo { 
position:absolute; width:475px; height:365px; padding: 0 0 0 242px; 
} 

h3 { 
position:absolute; width:475px; height:365px;display: block; 
} 

h3:hover { 
position:absolute; width:475px; height:365px; display: block; background-image: url('http://theshalomimaginative.com/Graphics/Homepagehover.png'); 
}

來源

2013-01-23 TheImaginative

的背景圖片絕不會顯示是否有前景圖像。 – Jrod

oops。謝謝。編輯它。 – TheImaginative

一個問題，我看到馬上就是你沒有正確關閉你的標籤。

而不是

</logo>

它應該是：

</div>

你可以這樣做，而不是：

<div id="logo"> 

</div> 

#logo { 
    position:absolute; 
    width:475px; 
    height:365px; 
    padding: 0 0 0 242px; 
    background: url('http://theshalomimaginative.com/Graphics/splashpagelogo.png') no-repeat; 

} 

#logo:hover { 
    position: absolute; 
    width:475px; 
    height:365px; 
    background: url('http://theshalomimaginative.com/Graphics/Homepagehover.png') no-repeat;  
}

http://jsfiddle.net/tech0925/SW7GP/

如果你想包括搜索引擎優化的目的，H3標籤，你可以這樣做：

<div id="logo"> 
<h3>Something Here</h3> 
</div> 

#logo { 
    position:absolute; 
    width:475px; 
    height:365px; 
    padding: 0 0 0 242px; 
    background: url('http://theshalomimaginative.com/Graphics/splashpagelogo.png') no-repeat; 

} 

#logo:hover { 
    position: absolute; 
    width:475px; 
    height:365px; 
    background: url('http://theshalomimaginative.com/Graphics/Homepagehover.png') no-repeat;  
} 

#logo h3 { 
text-indent: -9999px; 
}

http://jsfiddle.net/tech0925/YnMeD/

來源

2013-01-23 16:32:37

-1

不知道這是否是問題，但你並不需要相同的屬性分配給h3:hover，它必須是這樣的：

h3:hover { 
background-image:url('http://theshalomimaginative.com/Graphics/Homepagehover.png'); 
}

來源

2013-01-23 16:34:43 Morpheus

什麼是downvotes？ – Morpheus

改爲使用css sprite。

將兩個圖像組合成一個，以便圖像並排排列。

然後，不使用h3內部的圖像標籤，而只使用h3標籤。在懸停你只需要移動背景位置來顯示你的精靈中的其他圖像。

使用CSS精靈的優點是，用戶只需下載一個圖像。

HTML

<div id= "logo"> 
<h3>The Shalom Imaginative Documentary Photography</h3> 
</div>

CSS

#logo { 
    position:absolute; 
    width:475px; 
    height:365px; 
    padding: 0 0 0 242px; 
} 

h3 { 
    background-image: url('yourcsssprite.png'); 
    position:absolute; 
    text-indent: -9999em; 
    width:475px; 
    height:365px; 
} 

h3:hover { 
    background-position: -475px 0; 
}

來源

2013-01-23 16:41:09 Jrod

你想要的形象出現在當前圖像？如果是的話是這樣工作的，我已經受夠了左像素數量玩得到它的中心：

<div id= "logo"> 
<img src="Graphics/splashpagelogo.png" alt="The Shalom Imaginative Documentary Photography" /> 
<div id="overlay"> 
<img src="http://theshalomimaginative.com/Graphics/Homepagehover.png" alt="The Shalom Imaginative Documentary Photography" /> 
</div> 
</div> 


#logo { 
position:absolute; width:475px; height:365px; padding: 0 0 0 242px; 
} 
#overlay { 
    display: none; 
    position:absolute; width:475px; height:365px; top: 0; left: 195px; margin-top: 5px; 
} 
#logo:hover #overlay { 
    display: block; 
}

來源

2013-01-23 16:47:16 dj23

無法獲取背景圖像鼠標懸停在圖像

回答

相關問題