1

だから私はこのようなdivの中にいくつかのdivを持っています：

  <div class="flip-container">
        <div class="flipper">
            <a href="#" data-reveal-id="pc1">
                <div class="inner" style="background-color:#ea6524;">
                    <p class="text">title</p>
                    <img src="1.png" class="img" />
                </div>
            </a>
        </div>
   </div>

説明：このdivにカーソルを合わせると、divを反転するcss遷移がトリガーされるため、フリップコンテナとフリッパーが使用されます。hrefを使用すると、内側のdivをクリックすると、説明付きのdivを開くことができます。内側のdivは、テキストと画像の内側にある正方形です。

やりたいこと：フリップコンテナにカーソルを合わせると、テキスト「title」とimg「1.png」を非表示にします。

これどうやってするの？

クラスのテキストにdisplay：hiddenを追加しようとしましたが、実際のテキストにカーソルを合わせた場合にのみ機能し、フリップコンテナの背景にカーソルを合わせた場合には機能しません。

助けてくれてありがとう

可能であれば、純粋なcssソリューションをお勧めしますが、そうでない場合はjavascriptソリューションでも可能です。

4

4 に答える 4

2

これでうまくいくはずです：

.flip-container:hover .text, .flip-container:hover img {
    display: none;
}

visibility: hidden別の方法として、要素をまとめて削除するのではなく、ドキュメント フロー内に要素を保持するように使用することもできます。

于 2013-03-14T21:16:23.270 に答える
0

ＯＰ、

この場合、以上をお勧めvisibility:hiddenしdisplay:none;ます。このアプローチのフィドルは次のとおりです: http://jsfiddle.net/wEr3T/1/。

要するに、visibility:hiddenは文字通り要素を非表示にするだけです。以前と同じスペースを占有しているため、レイアウトには影響しません。

対照的に、display:none;レンダリングされないため、以前に占有されていたスペースが不明になります。そのため、設定されている要素を表示/非表示にするためにホバリングするとdisplay:none、望ましくないちらつきが発生する可能性があります。

于 2013-03-14T21:31:26.000 に答える
0

#flip-container設定でホバリング時にテキストや画像を非表示にdisplay: noneすると、フラッシングが発生したり、親コンテナのレイアウトが変わったりする場合があります。代わりに set で透明にしますvisibility: hidden。

.flip-container:hover img {
visibility:hidden
}
.flip-container:hover .text {
visibility:hidden
}

私はあなたのためにjsFiddleを作成しました。

于 2013-03-14T21:32:09.910 に答える