使用以下内容调整link / div的大小：移动设备的悬停选择器

Question

我正在尝试针对移动设备优化以下网站： http://whitehallrow.com/

蓝色功能区链接功能，使用CSS悬停选择器在悬停时更改图像：

.ribbonlinkA{
    background-image:url("/wp-content/uploads/2013/05/hr_slide_off.png");
    display:block;
    height:86px;
    width:512px;
}
.ribbonlinkA:hover{
    background-image:url("/wp-content/uploads/2013/05/hr_slide_on.png");
    display:block;
    height:86px;
    width:512px;
}

我一直在使用宽度：100％用于页面上的图像，这在我的Blackberry上很好地调整了它们的大小。但是，我根本无法调整功能区链接的大小;它们只是溢出页面的右侧，即使宽度为100％。

如何让他们适当调整大小？

Answer 1

您必须使用background-size属性（所有浏览器都不支持）才能获得要扩展的CSS背景。你最好使用<img>元素，使用javascript切换，以获得更大的图像（> 320px），就像你正在使用的那样。