使用移动设备的悬停选择器调整链接/ 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;
}

我一直在为页面上的图像使用 width:100%，这可以在我的 Blackberry 上很好地调整它们的大小。但是，我根本无法调整功能区链接的大小；它们只是从页面的右侧溢出，即使 width:100% 也是如此。

我怎样才能让它们适当地调整大小？

Answer 1

您必须使用 background-size 属性（并非所有浏览器都支持该属性）来缩放 CSS 背景。您最好使用 <img> 元素，使用 javascript 切换，以获得更大的图像 (>320px)，就像您正在使用的那样。