CODEWITHSUNDEEP
javascriptjquerycss
max_
max_

Reputation: 24481

CSS Image Hover Help

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" />

Upvotes: 0

Views: 154

Answers (6)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

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

Upvotes: 0

Paul
Paul

Reputation: 141829

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

Upvotes: 2

Phillip
Phillip

Reputation: 5656

Try adding

display: block;

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

width: 20px;
height: 20px;

Upvotes: 0

FarFigNewton
FarFigNewton

Reputation: 7273

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" />

Upvotes: 0

Marc B
Marc B

Reputation: 360572

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.

Upvotes: 0

SLaks
SLaks

Reputation: 887285

#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.

Upvotes: 0

Related Questions