0

イメージと図については、次のリンクを参照してください。画像、図 これはサンプル画像です。ここで、"Messages" タイトルは、左側の個別の div フロートです。"Joe Smith and you" div は、右側のフロートです。左側では、すべてのメッセージが個別の div にあります。以下に示すように、ホバー時に背景画像を変更する必要があります(青い矢印のように)。背景画像は、左の div から右の div にオーバーフローする必要があります。この次のコードを試しましたが、うまくいきません。div サイズに合わせてカットされます。画像のように全体像を表示する必要があります。

 <div onmouseover="this.className='msgHover'"></div> `

上記はdivのコードです。そして私のCSSクラスは

.msgHover
    {
        background-image: url('Images/MsgHighlight.png');
        overflow:auto;
    }
4

1 に答える 1

1

背景画像を の境界からオーバーフローさせることはできませんdiv。divただし、負の右マージンを使用して、オーバーフロー全体を独自の境界にすることができます。

#mydiv:hover
{
    margin-right: -50px;
}

divこれにより、他の要素をプッシュしたり、サイトのレイアウトに影響を与えたりすることなく、全体がより広くなります. これはまさにあなたがやろうとしていることのように聞こえます。ここに例があります。

この方法を使用するとdiv、最初に 2 つの s を使用してごまかす必要がなくなり、1 つの s に背景画像を適用するだけで済みますdiv。

ホバー時に右マージンが負になるようにアニメーション化されているこの例を見てください。

于 2012-08-04T07:02:27.000 に答える