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

坚果3年前网站工具1676

下面的代码实现了如何在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 网站首发,禁止转载。

相关文章

thinkphp5操作更新数据库的时候提示没有更新条件

thinkphp5操作更新数据库的时候提示没有更新条件

thinkphp5操作更新数据库的时候提示没有更新条件解决流程如下:调试检查错误,采用设置断点和打印的方式检查打印出如下的内容,检查到错误如下,是cateid的值错误。所以是cateid的传值有问题。...

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

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

如何免去Outlook邮箱验证手机号的步骤?

Outlook邮箱验证手机号:为什么它如此重要?Outlook邮箱是全球数百万用户首选的电子邮件服务之一,但它为了用户的安全和隐私提供了一项重要功能:邮箱验证手机号。在本文中,我们将深入探讨Outlo...

Facebook必须完成公共主页发布授权是怎么回事,怎么修复?

Facebook必须完成公共主页发布授权是怎么回事,怎么修复?

遇到的公共主页发布授权问题这个是Facebook里面遇到的问题,主要问题是:Facebook主页身份发帖或者给帖子点赞评论的时候,提示“必须完成公共主页发布授权”,说是公共主页的帖子被大量用户浏览,因...

jQuery创建div/p元素的多种方式,多层元素嵌套的方法

jQuery创建div/p元素的多种方式,多层元素嵌套的方法

jQuery创建div/p元素的多种方式,多层元素嵌套的方法<!DOCTYPE html> <html> <head> <meta ...

ID邮箱验证: 防范身份盗窃的重要步骤

ID邮箱验证: 保护您的账户安全在数字时代,我们越来越多地依赖于互联网来处理我们的金融交易、社交互动和敏感信息传输。因此,保护我们的个人身份和隐私变得至关重要。ID邮箱验证是一项关键的安全措施,可以帮...

发表评论    

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