Home/ Questions/Q 7084863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:21:16+00:00

<div class=bgdiv></div> <div class=fgdiv></div> <a href=# class=mainlink>LINKA</A> The bgdiv has no styles at all

  • 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”

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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