下面的代码实现了如何在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>以上代码可以实现下面的样式
移动鼠标之后变成
这个时候只需要将鼠标移开，即可实现隐藏按钮的功能。
这个里面实现的逻辑是移入鼠标，添加按钮元素，移出鼠标，删除按钮元素。
本文转载自：HTML如何在DIV右上角添加可隐藏的按钮
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
