CSS Image Hover Help

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

You <a> has no width or height so there is nowhere for a background image to display.

#AIM a is a selector for anchor tags inside an element with id #AIM like in this example: http://jsfiddle.net/Paulpro/5yg7t/ . You want to select an anchor tag with id="AIM" in which case you should just use an ID selector since ID's are unique. Use this:

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

#AIM:hover {
    background-image: url('http://maxk.me/img/aim-hover.png');
}

JSFiddle Example

Answer 2

#AIM a matches <a> tags inside of #AIM .
You need to write a#AIM to match <a> tags that are #AIM .

You can also just write #AIM , since IDs must be unique.

Answer 3

Your <a> tags have no content, so they'll be effectively 0x0 invisible elements. Either add some text:

<a ...>&nbsp;</a>

or give them a size in the CSS:

a#AIM {
   height: 10px;
   width: 10px;
}

or better yet, both.

Answer 4

Change the css to the following

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

Change the HTML to the following

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

Answer 5

Try adding

display: block;

to both classes; then try specifying a width and height...

width: 20px;
height: 20px;

Answer 6

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'); }