Question

这段代码有什么问题？我已经工作了好几个小时了，无法弄清楚为什么button.png现在会出现，但是链接是在“one”div的位置..？

#one
{
position: fixed;
left:225px;
top:702px;
}

.button
{
display: block;
width: 40px;
height: 40px;
background: url('images/button.png') bottom;
text-indent: -99999px;
}

.button:hover
{
background-position: 0 0;
background-color: transparent; 
border-style: none;
}

_

<body>
    <div id="map">
        <img src="images/map.png"/>
    </div>

    <div id="one">
        <a class="button" href="images/one.jpg"/>
            <img src="images/button.png"/>
        </a> 
    </div>

</body>

Answer 1

你的头衔与你的问题没什么关系......所以我只想回答这个问题。

图片未显示，因为默认情况下img是内联元素，您已将text-indent设置为-99999px。

您可以删除text-indent或将display img设置为block：

.button img { display: block; }

使用CSS在悬停时更改图像

1 个答案: