使用移动设备的悬停选择器调整链接/ div 的大小

Posted 2023-05-08

【中文标题】使用移动设备的悬停选择器调整链接/ div 的大小

【英文标题】：Resizing a link/div with :hover selector for mobile devices

【发布时间】：2013-06-09 00:47:20

【问题描述】：

我正在尝试针对移动设备优化以下网站： 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% 也是如此。

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

【问题讨论】：

请记住，触摸设备没有太多的：悬停状态的概念

请看***.com/questions/2427447/…

【参考方案1】：

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