在 :hover 元素上设置背景的高度和宽度

Question

我目前有这个代码

#navlogo {
    background: url(img/logo.png);
    background-size: 100px;
    display: block;
    height: 98px;
    width: 98px;
    border-radius: 49px;
}

我想添加这段代码

#navlogo:hover {
    background:url(img/logoblog.png);
    display: block;
    height: 98px;  /* this doesn't work */
    width: 98px;   /* this doesn't work */
}

原始图像是 150x150 缩小的，出于某种原因，它看起来比使用 98x98 更好，尤其是在 iPhone 上。但是，我似乎无法为 :hover 元素设置背景大小......它保持原来的大小。我知道它可以用background-size: 98px 98px; 完成，但这也不兼容IE8 及更低版本，而且CSS3PIE 也不涵盖背景大小。无论如何要这样做还是我必须调整悬停图片的大小？

Answer 1

尝试将背景大小从定义的 100 像素更改为包含。如果您在悬停时更改 div 大小，那么在这种情况下背景大小将随之更改。

例如：

#navlogo {
background: url(img/logo.png);
background-size: **contain**;
display: block;
height: 100px;
width: 100px;
border-radius: 49px;
}

#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px;               /*this doesn't work*/
width: 98px;                /*this doesn't work*/
}

我假设这就是您在此示例中的目标，因为您在悬停样式中指定“不起作用”的属性正在重置正常状态样式中存在的相同值。鉴于它们的定义完全相同，一切都不会改变。

编辑

如果 logoblog 图片确实更大，将 background-size 属性设置为 'contain' 也应该可以解决这个问题。