幅 100% の div コンテナーがあります。コンテナ内のマウスオーバーに応じてコンテンツを非表示および表示する必要があります。ただし、これは、メイン コンテナーの左から 30%、残り (70%) で、表示/非表示の効果なしで発生する必要があります。サブコンテナを追加せずにこの効果を出すことはできますか?
画像表現
この効果をどのように作るのですか?
幅 100% の div コンテナーがあります。コンテナ内のマウスオーバーに応じてコンテンツを非表示および表示する必要があります。ただし、これは、メイン コンテナーの左から 30%、残り (70%) で、表示/非表示の効果なしで発生する必要があります。サブコンテナを追加せずにこの効果を出すことはできますか?
画像表現
この効果をどのように作るのですか?
この Fiddleは、非常に基本的なソリューションを示しています。マウスが 30% 内を移動するたびにエフェクトが呼び出されるため、それを防ぐためにさらにロジックを追加する必要がある場合があります。
幅 500 ピクセルのコンテナーとサブコンテナー div を使用しましたが、これは説明目的のためだけです。JavaScript は、任意の幅の単一のコンテナーを管理します。'widthModifier' 変数に配置、マージン、またはパディングを追加する必要がありますが、必要に応じて、JavaScript のコンテナーからそれらを取得することもできます。
ダニエルの答えは、コンテンツの表示と非表示の問題を解決しません。あなたが望むことを正確に行う私のソリューションを見てください。結果を達成するためにCSS機能を使用しました。
Chrome を使用して例を表示します。他のブラウザーの場合は、css 機能の特定の実装を追加するだけです。