改变＆＃34;悬停＆＃34;的内容按键

Question

我想创建一个按钮，里面会有另外4个按钮（只是社交媒体徽标，转移到我的页面）。但这些4个按钮仅在您将鼠标悬停在＆＃34; main＆＃34;按钮。如果不会出现JS那就太好了。

Scheme of the button

Answer 1

希望这有帮助！

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您只需添加所需的样式

即可

View Codepen