html - 图像悬停将无法使用 CSS 背景

Question

我正在尝试为带有链接的图像创建悬停效果。它的标记是:

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

图像大小为 174 x 72，当您将鼠标悬停在该图像上时，我希望显示下半部分。我的 CSS 根本不起作用。请有人指出我做错了什么？

提前致谢

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

和:

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

编辑:

padding:     26px; 0 0 0;

注意，因为这部分不正确，浏览器会删除该行!