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>
以上代码可以实现下面的样式
然后将鼠标移入灰色方块,会出现下面的样式的按钮
这个时候只需要将鼠标移开,即可实现隐藏按钮的功能。
这个里面实现的逻辑是移入鼠标,添加按钮元素,移出鼠标,删除按钮元素。