6

内容と同じ幅にしたいので、幅がautoに設定されているDIV ( float:leftに設定されている) があります。

ホバーすると、DIVの幅をたとえば20ピクセル増やしたいと思います。

:hover CSS クラスで固定幅を設定すると、コンテナーはホバー時にその幅を取得しますが、

  1. CSS3-Transitions が適用されない/機能しない (Firefox 15.0.1 でテスト済み)
  2. 私のDIVのコンテンツがその固定幅よりも大きい場合、最終的な幅は正しくありません。

javascript を使用せずに、DIVのコンテンツをそのコンテンツに合わせて調整し、ホバー時にその幅を特定のピクセル数だけ増やすにはどうすればよいですか?

ここで私の JSFiddle を参照してください。

4

3 に答える 3

4

私にとってこれを行う最も簡単な方法は、コンテンツを 100% よりも高いパーセンテージで増やすことでした。例えば：

width: 110%;

ただし、要求どおりにサイズをピクセル単位で大きくしたい場合nは、使用できます

width: calc(100% + 50px);
于 2021-08-12T19:18:31.517 に答える
3

私はあなたのフィドルを見ましたが、これがあなたが必要とする正確な効果であるかどうかはわかりませんが、これを試してください:

.myDiv:hover {
    padding-right: 20px; 
}
于 2012-10-14T00:56:23.340 に答える
1

ここに示すように、デフォルトのパディングを 0 に、ホバー パディングを両側で 10px に設定します。

実際のデモ: http://jsfiddle.net/jfriend00/YWvTu/

.myDiv {
    float: left;
    width: auto;
    padding: 0;
    background-color: #eeeeee;
    border: 1px solid #aaaaaa;
    -moz-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
    -i-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.myDiv.alternative {
    width: 100px;
}
.myDiv:hover {
    padding: 0 10px;
}
于 2012-10-14T00:58:07.550 に答える