弹框中如何设置当点击上一个盒子的时候会和下一个进行无缝连接

最新推荐文章于 2022-09-15 23:19:53 发布

Solitude-xw

最新推荐文章于 2022-09-15 23:19:53 发布

阅读量860

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/qq_24189933/article/details/78959455

web 专栏收录该内容

18 篇文章

订阅专栏

本文展示了一个简单的HTML页面如何通过内联JavaScript实现元素显示隐藏的功能，并附带了一个趣味性的弹窗提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript">
		function test(){
			alert("杨焘是世界上最帅的人")
		}
	</script>
	<style>
		#total{
			position: relative;
			left: 500px;
		}
		.menu{
			width: 400px;
			height: 400px;
			border:1px solid #333;
			z-index: 100;
			position: relative;
			/*background:#fff;*/
			top: 2px;

		}
		.content{
			position: absolute;
			display: none;
			/*控制这个盒子相对于第一个盒子的位置*/
			left: -200px;
			width: 800px;
			height:800px;
			border:1px solid red;
			z-index: 10;


		}
		.menu:hover{
			/*因为两个盒子的边框合在一起会是2像素，所以设置2px，#fff（白色）会形成2个盒子无缝连接的效果*/
			border-bottom:2px solid #fff;
		}
		#total:hover .content{
			display: block;
			

		}
	</style>
</head>
<body>
	<div id="total">
		<div class="menu">点击<button onclick="test()">提交</button>你就会发现许多美妙的事情</div>
		<div class="content"><a href="http://www.baidu.com">百度</a></div>	
	</div>
</body>
</html>