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

153

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

165

HTML

insertAfter JavaScript

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

151

HTML

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

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

194

HTML

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

170