如何在引导程序div上显示按钮？

Question

我的查询就像渲染按钮并隐藏在boostrap中的form-group的每个div中。

<form class="form-horizontal" role="form"> 

    <div class="form-group"> 
     <div class="button-wrapper"> 
      <label class="col-sm-3 control-label no-padding-right">Label 01:</label> 
      <div class="col-sm-3"> 
       <input type="text" id="txt_codigo" class="form-control" maxlength="40" /> 
      </div> 
     </div> 

     <div class="button-wrapper"> 
      <label class="col-sm-3 control-label no-padding-right">Label 02:</label> 
      <div class="col-sm-3"> 
       <input type="text" id="txt_codigo" class="form-control" maxlength="40" /> 
      </div> 
     </div> 
    </div> 

</form> 

我告诉你一个截图我想要实现：

Image of how it should be

我想是显示在右上方的按钮，将光标定位指针和时隐藏当指针被移出光标。 按钮必须有一个简单的事件。

<div class="button-wrapper"> 

感谢

Answer 1

这是一些jQuery，它显示当用户将鼠标悬停在标签父div上时的图标/ imgs。

https://jsfiddle.net/yb4cdnzj/

HTML

<div class="lblClass"> 
    <label class="withBtns">Label 1</label> 
    <div class="buttons"> 
    <img class="btn1" src="#"> 
    <img class="btn2" src="#"> 
    <img class="btn3" src="#"> 
    </div> 
    <input type="text"> 

    <label>Label 2</label> 
    <input type="text"> 
</div> 

CSS

.lblClass { 
    width: 50%; 
    display: block; 
} 
label { 
    display: block; 
    padding: 5px; 
} 
.withBtns { 
    float: left; 
} 
.buttons { 
    display: none; 
} 
.buttons img { 
    float: right; 
    display: hidden; 
} 
input { 
    width: 100%; 
    padding: 5px; 
} 

jQuery的

$(".lblClass").hover(function() { 
    $(".buttons").toggle("slow"); 
}); 

Answer 2

怎么样一些CSS？

.form-horizontal .button-wrapper { 
    display: none; 
} 
.form-horizontal:hover .button-wrapper { 
    display: inline-block; 
}