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

坚果3年前网站工具1569

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

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


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


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

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



本文版权归坚果博客网站。尊重原创。

相关文章

亲测有效:购买顺丰的优惠券套餐之后怎么全额退款

亲测有效:购买顺丰的优惠券套餐之后怎么全额退款

在微信小程序中,因为顺丰的优惠券弹窗有点多,点击之后一时头脑发热购买了一个5元的优惠券套餐,通过微信支付5块钱,获得几个3块钱的寄件优惠券。但是实际我暂时没有寄快递的需求,在一个优惠券都没有使用的情况...

outlook怎么收取gmail邮箱的IMAP邮件?不能收取了

outlook怎么收取gmail邮箱的IMAP邮件?不能收取了

我查阅了一下outlook的文档:不再支持在 Outlook 网页版中连接其他电子邮件帐户,如Gmail重要: Microsoft 已于 2018 年 9 月移除了使用已连接帐户功能向 Ou...

Hotmail更改验证邮箱:确保邮件服务的顺畅运作

Hotmail更改验证邮箱:提升安全保障的重要步骤在今天的数字时代,电子邮件已经成为我们生活和工作的不可或缺的一部分。Hotmail,作为全球最大的邮件服务提供商之一,为数以亿计的用户提供着电子邮件通...

如何在JavaScript中有效验证电子邮件地址

随着互联网的广泛应用,电子邮件已成为我们生活中不可或缺的一部分。无论是用于个人通信还是商业用途,电子邮件都扮演着至关重要的角色。然而,为了保护用户隐私和数据安全,开发人员需要确保在他们的网站上正确验证...

为何Figma邮箱验证如此重要

Figma邮箱验证: 一步一步教你如何验证你的邮箱在今天的数字时代,邮箱验证是保护用户帐户和信息安全的重要步骤之一。对于Figma用户来说,验证邮箱不仅有助于确保帐户的安全性,还可以享受到更多功能和服...

亲测:平板电脑pad微信视频通话有回音和杂音

昨天晚上刚遇到的这个问题。自己用手机给自己的联想平板电脑打微信视频电话,出现了回音和尖锐的电子声音。一度以为是平板电脑的质量问题。但是播放视频和音频也没有发现杂音,所以应该不是喇叭的原因。尝试采用下面...

发表评论    

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