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

你的CSS选择器应该是：

a.phoneNumber

和

a.phoneNumber:hover

Answer 2

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

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

Answer 3

使用.phonenumber:hover代替.phonenumber a:hover。

此外，您的.phonenumber a无效。如果你真的想要使用它，它应该是a.phonenumber。

使用CSS背景图像悬停不起作用

3 个答案: