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

坚果3年前网站工具1827

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

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


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


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

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



本文作者 Nut ,转载标记出处。

相关文章

实测:阿里云新加坡和腾讯云孟买服务器的网站访问加载速度

实测:阿里云新加坡和腾讯云孟买服务器的网站访问加载速度

我自己搭建了两个一样的网站,在阿里云新加坡轻量服务器做了一个,在腾讯云孟买轻量服务器做了一个。先上截图,分析在下面:在两个测速网站都进行了测速。先看17ce的测速结果:阿里云新加坡轻量服务器的表现:再...

如何创建有效的验证码邮件系统

验证码邮件的作用与重要性在数字时代,验证码邮件成为了日常生活中不可或缺的一部分。无论您是在注册新的社交媒体帐户、购物网站、或进行网上银行交易,验证码邮件都是确保您的在线安全的关键。本文将深入探讨验证码...

Win10系统无法搜索到蓝牙设备并连接蓝牙

这个问题我遇到之后花了点时间去去测试和研究,明明正在搜索蓝牙设备,但是连手机开的蓝牙都搜索不到,也就是没有蓝牙搜索结果。更新了蓝牙驱动也不行。重启电脑也不行。我的是台式电脑,之前win7的时候可以连接...

从小型到大型项目:独立站搭建成本的不同因素

独立站搭建要多少钱?一窥网站建设成本的内幕在今天的数字化世界中,拥有一个独立网站已经成为了许多企业和个人的必备条件。无论是用于在线销售产品、展示作品,还是传达信息,网站都是与全球互联网联系的关键。但是...

跨境电商和外贸必备7个EDM邮件营销系统

跨境电商和外贸必备7个EDM邮件营销系统

跨境电商必备的7个EDM邮件批量群发工具软件:以下是简单介绍7个EDM邮件营销系统,可以根据自己的习惯和需要选择使用:1. Mailchimp 跨境必备邮件营销工具Mailchimp是一种功能强大的E...

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

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

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

发表评论    

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