我正在尝试为带有链接的图像创建悬停效果。它的标记是:
<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
}
最佳答案
/*
.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;
注意,因为这部分不正确,浏览器会删除该行!
关于html - 图像悬停将无法使用 CSS 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8211963/