3

別の DIV の上に DIV があります。

私が達成したいのは、上のDIVを非表示にして、下のDIVにアクセスできるようにすることです。

不透明度を試してみましたが、上部の DIV はまだ透明なので、下の DIV のコンテンツを操作することはできません。また、display:none;、visibility: hidden; も試しました。および z インデックス。それらのどれも機能しません。

トランジションも使用できるように、CSS3 でこれを実現するにはどうすればよいですか?

HTML:

<li class="panel-box"> 
    <div class="front box-style"> </div>
    <div class="back"> </div> 
</div> </li>

CSS:

.panel-box {
    margin: 5px;
    padding: 0;
    display: inline-block;
    clear: none;
    float: left;
    width: 310px;
    height: 200px;
    position: relative;
}

.box-style {
    background-color: red;
}

.front {
    width: 310px;
    height: 200px;
    z-index: 5;
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.front:hover {
    opacity: 0;
    display: none;  
}

.back {
    width: 310px;
    height: 200px;
    background-color: rgba(57, 54, 55, 0.95);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

本当にありがとう。

4

1 に答える 1

1

これのいくつかを行うように思われる回避策を少しまとめましたが、IE では惨めに失敗する可能性があります。

Chromeでテストされ、合理的に動作します... YMMV :)

および兄弟セレクターの組み合わせを使用してz-index、フロント/バック div がスタック コンテキスト内の場所を交換できるようにします。

CSS 兄弟セレクターを使用するには、前後の場所を交換する必要がありました。これが完璧な例だとは言いませんが、おそらくアイデアが浮かび上がるでしょう。

基本的にここで起こっていることは次のとおりです。

  • マウスが入る - トリガー.front:hover
  • フロントの z-index が -1 になる.back:hover
  • z-index はすぐに 100 になり、スタックの一番上に保持されます
  • 兄弟セレクタ back:hover + front は、前面の不透明度を 0 に保ちます
  • マウスが外に出ると、これはすべて逆になります

逆方向への移行はあまりスムーズではありません。まだ修正できるかどうかはわかりません。

デモ

CSS

.panel-box {
    margin: 5px;
    padding: 0;
    display: inline-block;
    clear: none;
    float: left;
    width: 310px;
    height: 200px;
    position: relative;
}

.front {
    width: 310px;
    height: 200px;
    padding: 10px;
    z-index: 5;
    opacity: 1;
    display: block;
    position: absolute;
    background-color: red;
    top: 0;
    left: 0;
    -webkit-transition: opacity .5s ease;
}

.front:hover {
    opacity: 0;
    z-index: -1;
}

.back {
    width: 310px;
    height: 200px;
    padding: 10px;
    color: white;
    background-color: rgba(57, 54, 55, 0.95);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    -webkit-transition: opacity .5s ease;
}

.back:hover + .front {
    opacity: 0;
}

.back:hover {
    z-index: 100;
    opacity: 1;
}

HTML

<li class="panel-box">
    <div class="back">content goes here</div>
    <div class="front box-style"></div>
</li>
于 2013-08-20T05:32:04.937 に答える