jQuery 如何使用css做一个浮动动作按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29209244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to do a floating action button using css?
提问by Ahamedos
I've been searching for a way to do something like :
我一直在寻找一种方法来做这样的事情：
(for a webpage) by using HTML/CSS/jQuery, but wasn't able to do it.
（对于网页）通过使用 HTML/CSS/jQuery，但无法做到。
I'm trying to make a button from which other options come out when you hover over it.
我正在尝试制作一个按钮，当您将鼠标悬停在该按钮上时，其他选项会从中出现。
回答by Katrin
Here is an example about how to use css and html to create the floating action button (without the hover effect)
下面是一个关于如何使用 css 和 html 创建浮动操作按钮的示例（没有悬停效果）
<button class="kc_fab_main_btn">+</button>
.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);
}
And here is a simple floating action button jQuery plugin, in case you need it. But it is using on click trigger rather than hover.
这是一个简单的浮动操作按钮 jQuery 插件，以备不时之需。但它使用的是点击触发器而不是悬停。
回答by Ben
Do you have any code prewritten or are you just asking for a tutorial?
您是否有任何预先编写的代码，或者您只是要求提供教程？
If the former, here is some idea of how you can structure your code for this to work:
如果是前者，这里有一些关于如何构建代码以使其工作的想法：
var el = $('a.button'); // the element you want to hover over
var hi = $('div.hidden'); // the div containing the hidden buttons
el.hover(function(){
//do this when the mouse hovers over the link, eg
hi.show('slide',{direction:'right'},250);
}, function(){
//do this when the mouse leaves the link, eg
hi.hide('slide',{direction:'left'},250);
});
