0

私は現在このコードを持っています

#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 に縮小されており、何らかの理由で、特に iPhone で 98x98 を使用するよりも見栄えがします。ただし、 :hover 要素の背景サイズを設定できないようです....元のサイズのままです。私はそれができることを知っていますがbackground-size: 98px 98px;、これもIE8以下と互換性がなく、CSS3PIEも背景サイズをカバーしていません. とにかくこれを行うにはありますか、それともホバー画像のサイズを変更する必要がありますか?

4

1 に答える 1

1

背景サイズを定義済みの100pxから変更してみてください。ホバー時に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*/
}

ホバースタイリングで「機能しない」と指定しているプロパティは、通常の状態のスタイリングに存在するのと同じ値をリセットするため、この例ではこれを目的としていると思います。それらがまったく同じように定義されていれば、何も変わりません。

編集

ロゴブログの画像が実際に大きい場合は、background-sizeプロパティを'contain'に設定すると、この問題も解決するはずです。

于 2013-03-08T14:41:14.950 に答える