HTML如何在DIV右上角添加可隐藏的按钮
下面的代码实现了如何在div的右上角设置一个button按钮,当鼠标划过div的时候,button按钮显示,当鼠标划出div的时候,button按钮消失。这个方法除了可以设置div之外,设置img、p等多种元素都可以。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>武林代码</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#ymDiv").hover(function(){ $("#ymA").css("visibility","visible"); },function(){ $("#ymA").css("visibility","hidden"); }); }); </script> </head> <body> <div id="ymDiv" style="position:relative;width:300px;height:300px;background-color:grey"> <button href="#" id="ymA" type="button" style="position:absolute;top:0;right:0;visibility:hidden">编辑</button> </div> </body> </html>
以上代码可以实现下面的样式
然后将鼠标移入灰色方块,会出现下面的样式的按钮
这个时候只需要将鼠标移开,即可实现隐藏按钮的功能。
这个里面实现的逻辑是移入鼠标,添加按钮元素,移出鼠标,删除按钮元素。