0

ホバーで画像が大きくなると、350pxすべてが押し出されます。

このコードは機能していますが、ホバーして画像が大きくなると、メニューや周りにあるものが下に押し出されます。

どうすればこれを止めることができますか?

#displaycar img
{
    height: 200px;
}
#displaycar img:hover
{

    height: 350px;

}

ところで、私は twitter ブートストラップを使用しており、試してみposition: absolute;ました。ホバー時にサイズを大きくする方法はありますが、何も押さないで何も動かさないでください。

4

3 に答える 3

0

要素に z-index を使用します。初期レイアウトでは値を同じに保ちますが、ホバリング時にはより強い (前面に持ってくる) 値にします。

#displaycar img:hover
{
    z-index:[stronger value];
    height: 350px;
    position :[relative, absolute, fixed];
}

注: z-index を使用するには、位置の値の 1 つを使用する必要があります

Z-index は重なっている要素を優先します (前面に移動 / 背面に移動)

ここに、この件に関するもう少しの情報があります

于 2013-06-26T21:59:53.153 に答える
0

可能ですが、周囲のコンテンツへの影響を避けるために、要素自体をドキュメントの流れから削除する必要があります。これは を使用して実現するのが最も簡単position: absoluteですが、残念ながらこれにはposition: relative(またはその他の非static position値) とともにラッピング要素を使用する必要があります。ラッピング要素には、幅と高さを定義する必要があります。これは、(JavaScript または PHP (他の多くのオプションの中でも)) を使用して自動的に行うことができます。

たとえば、HTML:

<span>
    <img src="http://placekitten.com/400/400/" />
</span>
<p><!-- generic dummy content, excised for brevity --></p>

そしてCSS：

span {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 150px;
}

span img {
    position: absolute;
    top: 0;
    left: 0;
    height: 150px;
    width: 150px;
    /* Vendor-prefixes removed, for brevity */
    transition: all 1s linear;
}
span:hover img {
    width: 400px;
    height: 400px;
    /* Vendor-prefixes removed, for brevity */
    transition: all 1s linear;
}

JS フィドルのデモ。

于 2013-06-26T22:22:11.193 に答える