Скрыть DIV при наведении курсора на другой DIV

Question

так у меня есть несколько дивы внутри дивы, как это:

<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 У меня есть CSS срабатывает переход, который переворачивает div. href просто позволяет открыть div с описанием при щелчке внутреннего div внутренний div - это квадрат с текстом и изображением.

ЧТО Я ХОЧУ СДЕЛАТЬ: Я хотел бы скрыть текст «title» и img «1.png», когда я нахожу флип-контейнер.

как я могу это сделать?

Я попытался добавить отображение: скрыто для текста класса, но оно работает только тогда, когда я нахожу фактический текст, а не когда я нахожу флип-контейнерный фон.

спасибо за помощь

я предпочел бы чистое решение CSS, если это возможно, если не также Javascript решение может сделать.

Answer 1

О.П.,

В этом случае я бы предложил visibility:hidden над display:none;. Вот сценарий с таким подходом: http://jsfiddle.net/wEr3T/1/.

Короче говоря, visibility:hidden будет буквально только скрыть элементы (элементы) - до тех пор, пока не займет место, которое он сделал раньше, что не повлияет на макет.

Напротив, display:none; заставляет его не визуализироваться, поэтому пространство, которое оно ранее занимало, теперь пропало без вести. Таким образом, зависание, чтобы показать/скрыть элементы, которые были установлены на display:none, вероятно, вызовет некоторое нежелательное мерцание.

Answer 2

Это должно сделать трюк:

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

В качестве альтернативы, вы можете использовать visibility: hidden как это будет держать элементы в потоке документов, а не удаляя их все вместе.

Answer 3

скрытие текста и изображения при наведении #flip-container путем установки display: none может вызвать проблескивание и изменить расположение родительского контейнера. поэтому вместо этого сделайте их прозрачными с помощью набора visibility: hidden.

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

Я создал jsFiddle для вас.

Answer 4

Попробуйте это ...

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

<div class="flip-container"> 
 
     <div class="flipper"> 
 
      <a href="#" data-reveal-id="pc1"> 
 
       <div class="inner" style="background-color:yellow;"> 
 
        <p class="text" style="color:red">title</p> 
 
        <img src="//placehold.it/100x100" class="img" /> 
 
       </div> 
 
      </a> 
 
     </div> 
 
    </div>