Отобразить изображение кнопки за пределами ссылки

Question

Могу ли я создать кнопку, использовать фоновое изображение, которое изменяется при наведении и активном, и иметь активное состояние, отображающее изображение, выходящее за пределы привязки? Вот мой спрайт:

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

Answer 1

ли вы имеете в виду something like this?

Якорь «расширяет», когда активен, но не меняет поток, поскольку он использует отрицательный запас, чтобы сделать его фактически того же размера, что и раньше.

Итак: добавьте количество прокладок, которые хотите расширить якорь, затем добавьте ту же сумму, что и отрицательный запас. (Вам нужно, чтобы якорь был элементом block или inline-block, так как в противном случае он не может использовать маржу)

Не нужно использовать JavaScript с использованием этого метода.

Answer 2

Это то, что я придумал: DEMO

Он просто ставит фоновое изображение на <li>. Не уверен, что это именно то, что вы ищете или нет.

Answer 3

Это трудное объяснение! То, что я сделал, это сделать тег 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; 
}