Изменение содержимого кнопки «зависания»

Question

Я хочу создать кнопку, которая будет иметь еще 4 кнопки (только логотипы социальных сетей, перенос на мои страницы) внутри.Но эти 4 кнопки появляются только при наведении курсора на «главную» кнопку.Было бы здорово, если бы не появилось JS.

Схема кнопки

Answer 1

Надеюсь, это поможет!

.hover-button-group {
  display: inline-block;
  padding: 10px;
  position: relative;
}

.hover-button-group:hover .hover-extra-buttons {
  display: block;
}

.hover-extra-buttons {
  background: #e6e6e6;
  border-radius: 3px;
  display: none;
  padding: 10px;
  position: absolute;
  right: -100%;
  top: 0;
}

<div class="hover-button-group">
  <button class="hover-button">
        Some Fancy Button
  </button>
  <div class="hover-extra-buttons">
    <button class="hover-button"> One   </button>
    <button class="hover-button"> Two   </button>
    <button class="hover-button"> Three </button>
  </div>
</div>

Вам просто нужно добавить нужный стиль, который вы хотите

Просмотреть Codepen