Question

I am trying to add a pseudo hover to a <a> tag, but no image is showing with either css class. Please can you tell me what I am doing wrong as I am new to css.

#AIM a {
    left:420px;
    top:590px;
    position: absolute;
    background-image: url('http://maxk.me/img/aim.png');
}
#AIM a:hover {
    left:420px;
    top:590px;
    position: absolute;
    background-image: url('http://maxk.me/img/aim-hover.png');
}

<a id="AIM" href="http://dribbble.com/_max" />

Answer 1

The A tag has no idea how big your image is. A is also an inline element, so it stretches to the size of its content (usually the text inside).

You need to:

• Define width and height (I’m using 300px)

• Make it a block element

  {
  display: block;
  width:300px;
  height:300px;
  left:420px;
  top:590px;
  position: absolute;
  background-image: url(‘http://maxk.me/img/aim.png’);
  }