Как сделать такую фичу в дизайне

190
28 декабря 2018, 04:20

На сайте Inbox Google Вот увидел интересную реализацию в дизайне. Функциональные кнопки появляются только при наведении на блок(перейдите и убедитесь сами). Не могу понять как это реализовано. Может где есть готовые примеры или какая реализация?

Answer 1

Если вы про кнопки, которые возникают при наведении на письмо, то делается это через селектор :hoverродительского элемента.

.outer { 
  height: 50px; 
  background: orange; 
} 
 
.inner { 
  display: none;    
} 
 
.outer:hover .inner { 
  display: block; 
}
<html> 
<body> 
<div class="outer"> 
  <div class="inner"> 
    <button>Open</button> 
    <button>Save</button> 
  </div> 
</div> 
</body> 
</html>

READ ALSO
Как вернуть слои в Avocode?
HTML

Как вернуть слои в Avocode?

Похоже, что нажал что то не тоОткрываю макет и вижу что, панель LAYERS есть, но она пуста! Помогите!

 202
insertAfter JavaScript
HTML

insertAfter JavaScript

Такой вопрос у меня сегодня появился

 188
Sublime Text 3. Не получается закомментировать код
HTML

Sublime Text 3. Не получается закомментировать код

В Sublime Text 3 не могу закомментировать кодПробую CTRL + / не реагирует

 240
SPA с 2 страницами
HTML

SPA с 2 страницами

 213