Question

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
}

Answer 1

/*
.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 !