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

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

The bgdiv has no styles at all so these and ZIndex need to be assigned(the others already have z-index properties) and then needs to be assigned a height and width which is "x" amount of pixels bigger than link A.

The bgdiv would then be positioned behind link A and in front of fgdiv so that the bgdiv directly surrounding the link(visually), with a similar effect to padding.

has anybody got any ideas on how this could be achieved?

EDIT:enter image description here

So the image above is as if I'd just clicked on the login button. The green bar div which was initially behind the grey rectangle link surrounder div has now been "moved up a layer", but is still behind the text "login"

4
  • Have you tried anything? Jan 20, 2012 at 15:03
  • Are you trying to change the background of the link? If so, you could accomplish this by toggling a CSS class(es). Jan 20, 2012 at 15:07
  • Yes. Place bgdiv inside fgdiv and a inside bgdiv.
    – Ilia G
    Jan 20, 2012 at 15:14
  • Edited question, sorry for the bad wording
    – Barney
    Jan 20, 2012 at 15:20

2 Answers 2

1

Consider one flattened background image (green bar and squares all in the same image). Cut up that combined background image into 4 pieces (or better yet use a single sprite).

You basically need an 'on' and 'off' state for each color (thus the 4 pieces). Then you can just assign each of them to a separate CSS class (.gray-on, .gray-off) and toggle the class for each a element.

For example, the grey bg images would look like this:

Gray On Gray Off

0

I've got here http://jsfiddle.net/sgamt/ but I really don't like it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.