JQuery относительное расположение одного элемента к другому

Question

<div class="bgdiv"></div>
<div class="fgdiv"></div>

<a href="#" class="mainlink">LINKA</A>

У bgdiv вообще нет стилей, поэтому их и ZIndex нужно назначить (другие уже имеют свойства z-index), а затем нужно назначить высоту и ширину, что на «x» количество пикселей большечем ссылка A.

Тогда bgdiv будет расположен за ссылкой A и перед fgdiv, так что bgdiv непосредственно окружает ссылку (визуально), с эффектом, подобным заполнению.

имеетКто-нибудь получил какие-либо идеи о том, как этого можно достичь?

РЕДАКТИРОВАТЬ:

Таким образом, изображение выше, как если бы я только что нажал на кнопку входа в систему.Зеленая полоса div, которая изначально находилась за серой прямоугольной ссылкой surrounder div, теперь «перемещена вверх по слою», но все еще находится за текстом «login»

Answer 1

Рассмотрим одно сплющенное фоновое изображение (зеленая полоса и квадраты на одном изображении).Разрежьте это объединенное фоновое изображение на 4 части (или лучше используйте один спрайт).

В основном вам нужно состояние «включено» и «выключено» для каждого цвета (таким образом, 4 штуки).Затем вы можете просто назначить каждому из них отдельный класс CSS (.gray-on, .gray-off) и переключать класс для каждого элемента a.

Например, серые изображения bg будут выглядетькак это:

Answer 2

Я попал сюда http://jsfiddle.net/sgamt/ но мне действительно это не нравится.