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

坚果1个月前网站工具19

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

相关文章

阿里云的香港服务器需要备案?无法访问被墙

阿里云的香港服务器需要备案?无法访问被墙

我前几天买了一个阿里云的香港轻量云服务器。所有东西都配置好了,结果发现网站被墙,无法访问。当时立刻就找了阿里云的客服寻求帮助。阿里云客服回复说:查看端口是通的,香港属于境外网络环境,在大陆访问会出现较...

Zblog修改后台样式之后网站没有更新怎么办

Zblog修改后台样式之后网站没有更新怎么办

Zblog在后台修改了设置,但是网站没有显示更新,这个问题一般是网站缓存的问题。比较简单。可以在Zblog系统后台的首页点击刷新缓存文件。按钮位置如下:...

分享两个自用的PayPal费用计算器,在线使用完全免费

分享两个自用的PayPal费用计算器,在线使用完全免费

这里提到的是一个贝宝(PayPal)费用计算器,可以显示使用贝宝(PayPal)账户进行某些操作所需支付的费用。这个工具可以帮助人们检查运行贝宝账户时可能需要支付的转换和其他费用,从而更好地管理预算。...

用JS/JQuery调换两个div/p/span的顺序

用JS/JQuery调换两个div/p/span的顺序

<!DOCTYPE html> <html> <head> <meta charset="utf-8">...

超级干货:独立站建站SAAS平台对比汇总优缺点shopify/shopyy/shopline/店匠/Wix等

超级干货:独立站建站SAAS平台对比汇总优缺点shopify/shopyy/shopline/店匠/Wix等

本图表依次显示了下面的跨境电商建站平台:shoplineshopifyueeshopshoptagoshopyyshoplazza店匠xshoppyWixBigCommerceEcomzPinnacl...

如何用JS/JQuery在html的p/span前面加上新的内容/代码

如何用JS/JQuery在html的p/span前面加上新的内容/代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8">...

发表评论    

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