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

坚果1年前网站工具1080

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

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


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


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

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



本文由坚果·跨境发布,转载请署名。

相关文章

Thinkphp网站安装部署之后访问网站首页404 Not Found

Thinkphp网站安装部署之后访问网站首页404 Not Found

今天我把Thinkphp网站安装部署之后,发现我的网站在访问网站首页的时候出现了404 Not Found的错误。我检查了一下,没有发现配置问题。在宝塔里面我的网站运行目录设置的是public,域名解...

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

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

为何Figma邮箱验证如此重要

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

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

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

开发信的新趋势:外贸福步论坛经验分享

外贸福步论坛怎样写开发信:成功的关键步骤在如今竞争激烈的国际贸易市场中,写开发信是一项至关重要的任务。外贸福步论坛为许多贸易专业人士提供了宝贵的资源,帮助他们成功地与潜在客户建立联系。在本文中,我们将...

js/jQuery怎么添加div、button、p’等HTML元素的代码

通过jQuery设置HTML里面的div和button等代码。目的是实现HTML文件里面是空白body,然后body里面的内容全都是js实现输出的。最主要的是用到jQuery的构建html元素和app...

发表评论    

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