background - 在 :hover element 上设置背景的高度和宽度

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' 应该也能解决这个问题。