鏈接邊界外的顯示按鈕圖像

我可以創建按鈕，使用在懸停和激活時發生變化的背景圖像，並且激活狀態顯示延伸到錨點範圍外的圖像嗎？這裏是我的精靈：鏈接邊界外的顯示按鈕圖像

https://dl.dropbox.com/u/7737304/menu-sprite1.png

精靈的上半部分是「懸停」，下方是「積極的」。我沒有任何東西在實體欄下面是可點擊的鏈接，我不想設置寬度，因爲菜單文本將設置在頂部並延伸到圖像的左側和右側。

我試圖將背景圖像分配給父li標籤，該標籤適用於'懸停'，但我無法使其適用於'主動'。

任何想法？

CSS

.navigation li:hover{ 
background: transparent url(../images/menu-sprite.png) center -86px no-repeat; 
} 
.navigation a{ 
color: #e8e8e8; 
font-weight: bold; 
text-transform: uppercase; 
padding:0.5em 0.8em; 
} 
.navigation a:hover{ 
color: #fff; 
} 
.navigation a.active { 
color: #fff; 
}

來源

2012-06-21 user1368392

這似乎是一個完美使用案例的JavaScript。你爲什麼不看看？ –

你的意思是something like this？

活動時「錨點」展開，但不會更改流量，因爲它使用負餘量使其實際上與以前相同。

因此：添加要擴展錨點的填充量，然後將相同的金額添加爲負邊距。（您確實需要錨點爲block或inline-block元素，否則它不能使用邊距）

不需要使用此方法的JavaScript。

來源

2012-06-21 14:14:54 floorish

這是一個！非常感謝您的幫助。 – user1368392

這是我想出了：DEMO

它只是把對<li>的背景圖像。不知道這是不是你正在尋找或不是。

來源

2012-06-21 14:15:08 jeschafe

這是一個很難解釋！我所做的就是讓a標籤可點擊，並將li擴展爲::after，我可以將這些樣式應用於更改所需的樣式，但不能點擊。

就像我說的，很難解釋，但這裏是一個演示：http://jsfiddle.net/cchana/SgH5C/

下面是一些CSS，可以幫助你：

.navigation li::after { 
    background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -49px no-repeat; 
    bottom: 0px; 
    content: ''; 
    display: block; 
    height: 31px; 
    position: absolute; 
    width: 100%; 
} 
.navigation li:hover::after { 
    background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -130px no-repeat; 
}

來源

2012-06-21 14:20:27 cchana

鏈接邊界外的顯示按鈕圖像

回答

相關問題