CODEWITHSUNDEEP
htmlcssbackground-image
user1038814
user1038814

Reputation: 9677

Image hover won't work using CSS background

I'm trying to create a hover effect for an image with a link. The markup for it is:

<a class="phoneNumber" href="#" title="">897698897</a>

The image size is 174 x 72 and I wish to have the bottom half display when you hover over this image. My CSS doesn't work at all. Please could someone point out what I'm doing wrong?

Many thanks in advance

.phoneNumber {
    background:  #101112 url("../img/phone.png") 0 0px no-repeat;
    height:      36px;
    width:       174px;
    display:     block;
    float:       right;
    margin:      0;
    padding:     26px; 0 0 0;
    text-indent: -9999px;
    position:    absolute;
    right:       0;
    z-index:     2
}


.phoneNumber a {
    background:  #101112 url("../img/phone.png") 0 0px  no-repeat;
    height:      36px;
    width:       174px;
    display:     block;
    float:       right;
    margin:      0;
    padding:     26px; 0 0 0;
    text-indent: -9999px;
    position:    absolute;
    right:       0;
    z-index:     2
}

.phoneNumber a:hover {
    background:  #101112 url("../img/phone.png") 0px -36px no-repeat;
    height:      36px;
    width:       174px;
    display:     block;
    float:       right;
    margin:      0;
    padding:     26px 0 0 0;
    text-indent: -9999px;
    position:    absolute;
    right:       0;
    z-index:     2
}

Upvotes: 0

Views: 1274

Answers (3)

undone
undone

Reputation: 7888

/*
.phoneNumber {
    background:  #101112 url("../hop.gif") 0px 0px no-repeat;
    height:      36px;
    width:       174px;
    display:     block;
    float:       right;
    margin:      0;
    padding:     26px  0 0 0;
    text-indent: -9999px;
    position:    absolute;
    right:       0;
    z-index:     2
}

*/
.phoneNumber a {
    background:  #101112 url("../hop.gif") 0px 0px  no-repeat;
    height:      36px;
    width:       174px;
    display:     block;
    float:       right;
    margin:      0;
    padding:     26px  0px 0px 0px;
    text-indent: -9999px;
    position:    absolute;
    right:       0;
    z-index:     2
}

.phoneNumber a:hover {
    background:  #101112 url("../hop.gif") 0px -36px no-repeat;
    height:      36px;
    width:       174px;
    display:     block;
    float:       right;
    margin:      0;
    padding:     26px 0px 0px 0px;
    text-indent: -9999px;
    position:    absolute;
    right:       0;
    z-index:     2
}

and:

<span class="phoneNumber"><a  href="#" title="">897698897</a></span>

edit:

padding:     26px; 0 0 0;

pay attention, because this part was incorrect, browsers drop that line !

Upvotes: 1

v42
v42

Reputation: 1425

Use .phonenumber:hover instead of .phonenumber a:hover.

Also, your .phonenumber a is not working. If you really want to use it, it should be a.phonenumber.

Upvotes: 0

Filip
Filip

Reputation: 2522

Your CSS selector should be:

a.phoneNumber

And

a.phoneNumber:hover

Upvotes: 1

Related Questions