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

坚果3年前网站工具1623

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

相关文章

Zblog在宝塔面板设置伪静态之后无法访问网站

Zblog在宝塔面板设置伪静态之后无法访问网站

如果你出现下面这种提示:说明你根目录里面默认的index.html没有被删除。这个是宝塔面板新建网站的时候自动在根目录里面创建的几个默认网页之一。因为这个页面与伪静态的index.php冲突,所以导致...

Reddit是什么网站,是做什么的,有什么用途?

Reddit是什么网站,是做什么的,有什么用途?

有很多网友不知道Reddit到底是什么网站,这个网站是做什么的,对普通用户来说有什么用途。下面我们简单来看下。简单介绍一下,小编我是品牌的站外推广运营,其中包括了Reddit运营,负责公司品牌在Red...

如何让html页面加载时就调换两个p/span/div的位置

如何让html页面加载时就调换两个p/span/div的位置

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

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

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

亲测有效:钉钉电脑双开软件工具

亲测有效:钉钉电脑双开软件工具

【使用说明】:首次打开会弹出英文窗口, Talk.exe       pid: 【X1】·   type: Mutant  &nb...

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

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

发表评论    

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