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>

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

那是你的意思吗？

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

1 个答案: