CSS Div question

Out of context: Reply #3

  • Started
  • Last post
  • 17 Responses
  • Continuity0

    Rather than setting these bits of image in a table, it would be a hell of a lot easier to set up four square divs in two rows of two to form a larger square. Then in each you can set the segment of image as a background, which tyou could them swap out on hover in your CSS file.

    So, something like this. Let's assume we're talking about your top-left div (values are for placeholder purposes):

    #topLeft {
    width: 100px;
    height 100px;
    background-image: url(images/visibleBit.png);
    }

    Then:

    #topLeft:hover {
    background-image: url(images/invisibleBit);
    }

    Effectively, you're using the :hover pseuo-class to affect the behaviour of the div.

View thread