image - 悬停时图像更改但保持不变

Question

我正在制作一个交互式地图，并希望在其上放置一些按钮，当悬停在上面时会改变颜色（单独的图像），然后链接到不同的图像。

我在完成这项工作时遇到了很大的问题......我目前的 css 一团糟：

a.button
{
position: inherit;
display:block;
background:transparent url('images/button.png') bottom;
background-repeat: no-repeat;
}

a.button:hover
{
position: inherit;
background-image: url('images/button_hover.png');
background-repeat: no-repeat;
}

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

HTML：

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

        <a href="http://matthewligotti.com" class="button"/>
                <img src="images/button.png" id="one"/>
        </a>

    </div>

所以我希望图像是链接，并为每个按钮悬停相同的两个图像，唯一改变的是它们带给你的链接。我该怎么做呢？

Answer 1

如果您可以编辑图像，则可以通过将它们堆叠在一起将它们组合成一个 .png。然后，如果按钮是 100px x 200px，你可以这样做：

a.button
{
display:block;
height:100px;
width:200px;
background-image:url('1.jpg');
background-position:0 0;
background-repeat: no-repeat;
}

a.button:hover
{
background-position:0 -100px;
}

和

 <a href="http://matthewligotti.com" class="button"/></a>
 <a href="http://matthewligotti.com" class="button"/></a>   

这将切换正在显示的新双图像的上半部分或下半部分。

你的意思是这样吗？