Скрыть на: hover, DIV over DIV

Question

У меня есть DIV поверх другого DIV.

Что я хочу достичь - скрыть DIV сверху, чтобы иметь доступ к DIV ниже.

Я пробовал непрозрачность, но поскольку верхний DIV все еще там, просто прозрачен, он не позволит мне взаимодействовать с содержимым DIV ниже. Я также попробовал отображение: нет ;, видимость: скрыта; и 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; 
} 

Благодаря кучу.

Answer 1

Я собрал некоторое обходное решение, которое, похоже, делает некоторые из этих действий, но, скорее всего, он потерпит неудачу в IE.

Протестирован и работает достаточно на Chrome ... YMMV :)

Он использует комбинацию z-index и родственных селекторов, чтобы передние/задние дивы поменять местами в контексте стэк.

Мне пришлось поменять местами спереди/сзади, чтобы использовать селекторные ролики CSS. Я не утверждаю, что это прекрасный пример, но, возможно, он получит идеи.

В основном то, что происходит здесь:

• Вступая мышь - триггер .front:hover
• фронт г-индекс идет к -1 вызывая .back:hover
• назад г-индекс немедленно переходит к 100 держа его на верхней части стопки
• селектор спины назад: наклон + передний сохраняет переднюю непрозрачность на 0
• Когда мышь переходит, все это отменяет

Обратный переход не очень гладко - не совсем понял, может ли это быть исправлено.

Demo

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>