CSS懸停動態寬度背景圖像

我正在嘗試在我的網站上的導航上創建鼠標懸停效果。導航是一個帶有幾個項目的單槓。代碼如下;CSS懸停動態寬度背景圖像

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About us</a></li> 
    <li><a href="#">Our work and portfolio</a></li> 
    <li><a href="#">Contact</a></li> 
</ul>

這有一個簡單的背景顏色和每一個<li>之間是分離的項目邊界。現在我想給出一個關於懸停的背景圖片，雖然我的問題是 - 正如你所見 - 每個<li>有不同的寬度，因爲它的內容和懸停的圖像如下所示;

hover effect

所以它實際上只是在左，右一個黑色的影子。必須將右側陰影放置在<li>的絕對右側，並將左側陰影放在絕對左側。

有什麼辦法可以達到這個目的嗎？如果使用jQuery或類似的東西，這不是問題。

在此先感謝。

來源

2012-04-16 Roel

這將有助於查看應用的樣式。 – steveax 2012-04-16 23:05:58

如果你想要陰影和變長效果。然後將圖像分成三部分。和更新您的標記是這樣的

左陰影
中心部分
右陰影

然後使用下面的CSS代碼片斷

li a:hover:before { content: url("image/leftshadow.jpg"); } 
li a:hover { background-Image: url("image/center.jpg"); } 
li a:hover:after { content: url("image/rightshadow.jpg"); }

來源

2012-04-16 23:06:47 Starx

經典[滑動門]（http://www.alistapart.com/articles/slidingdoors/）技術只需要2個圖像，並已被許多人精煉[只能使用一個圖像]（http://kailoon.com/css - 僅滑動門使用1-圖像/） – steveax 2012-04-16 23:10:03

鏈接是正確的，因爲OP僅將圖像用於'：hover'，但[這裏是第二部分]（http://www.alistapart.com/articles/slidingdoors2 /），它涵蓋了結合'：hover'和默認圖像的ALA。 – steveax 2012-04-16 23:30:04

您的圖片看起來像linear gradient，所以你可以嘗試使用

background-image: linear-gradient(to right, #111, #333, #111);

您可能希望添加對舊版瀏覽器的支持。

來源

2012-04-16 23:15:51 Neil

CSS懸停動態寬度背景圖像

回答

相關問題