HTML如何在DIV右上角添加可隐藏的按钮

坚果3年前网站工具1535

下面的代码实现了如何在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>

以上代码可以实现下面的样式


然后将鼠标移入灰色方块,会出现下面的样式的按钮


这个时候只需要将鼠标移开,即可实现隐藏按钮的功能。

这个里面实现的逻辑是移入鼠标,添加按钮元素,移出鼠标,删除按钮元素。



本文由 NutBlog 网站首发,禁止转载。

相关文章

有效方法:检查邮箱是否存在

如何查邮箱是否存在在今天的数字时代,电子邮件已经成为我们日常生活和工作中不可或缺的一部分。我们使用电子邮件来与朋友、家人和同事保持联系,接收重要的通知,以及参与在线社交和商务交流。然而,随着电子邮件的...

解决GTA 5邮箱验证问题的实用指南

GTA 5怎么验证邮箱?完整步骤一网打尽GTA 5是一款备受欢迎的开放世界游戏,让玩家可以在虚拟的洛杉矶市内尽情探索。但是,要进入游戏并享受其中的所有功能,你可能需要验证你的邮箱地址。这个过程有时可能...

邮箱验证码验证的步骤:简化您的电子邮件安全

如何验证邮件:一步步教你检查邮箱验证码随着互联网的普及,电子邮件已成为我们日常生活和工作中不可或缺的一部分。我们使用电子邮件发送和接收重要的信息,包括账户密码重置、交易确认和订阅更新等。然而,电子邮件...

外贸独立站建设费用解析:建站投入与回报

建一个外贸独立站大约多少钱?——了解网站建设的成本在现代数字化时代,拥有一个外贸独立站已经成为国际贸易的一个重要方面。然而,很多初入这一领域的人都会问同一个问题:“建一个外贸独立站大约多少钱?” 这是...

为什么需要查邮箱验证码?

随着电子邮件在我们日常生活中的普及,邮箱验证码变得愈加重要。无论您是注册新账户、找回密码、或进行重要的安全验证,邮箱验证码都扮演着关键的角色。本文将深入探讨如何查找邮箱验证码,为什么需要这么做,以及如...

海外独立站的财务规划:多少钱是必要的?

海外独立站,多少钱?在数字时代,拥有一个海外独立站变得越来越重要,无论是作为个人品牌的一部分,还是企业扩展到国际市场的一种方式。但是,有一个关键问题需要回答:海外独立站需要多少钱?本文将深入探讨这个问...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。