jquery - CSS float 操作按钮

Question

我正在尝试制作一个按钮，当您将鼠标悬停在该按钮上时，其他选项会弹出。我一直在寻找一种方法来做类似下面的屏幕截图的事情，但我做不到。它用于网页，因此需要使用 HTML、CSS 和 jQuery 来完成。

Answer 1

这是一个使用 HTML 和 CSS 创建 float 操作按钮(没有悬停效果)的示例。

.kc_fab_main_btn {
  background-color: #F44336;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background: #F44336;
  border: none;
  outline: none;
  color: #FFF;
  font-size: 36px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: .3s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.kc_fab_main_btn:focus {
  transform: scale(1.1);
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

<button class="kc_fab_main_btn">+</button>

DEMO

这里是一个简单的 float 操作按钮 jQuery 插件，以备不时之需。但它使用的是点击触发而不是悬停。

KC_FAB