基于JS与CSS实现鼠标滑过显示详情

最新推荐文章于 2022-08-29 14:25:22 发布

小仓桑

最新推荐文章于 2022-08-29 14:25:22 发布

阅读量1.4k

点赞数

分类专栏： javascript HTML 文章标签： javascript css

本文链接：https://blog.csdn.net/qq_43462019/article/details/102541822

版权

javascript 同时被 2 个专栏收录

45 篇文章 4 订阅

订阅专栏

HTML

21 篇文章 1 订阅

订阅专栏

JS 实现鼠标滑过显示详情

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标滑过详情</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				box-sizing: border-box;
				margin: 20px auto;
				width: 200px;
				height:40px;
				text-align: center;
				line-height: 40px;
				border: 1px solid lightcoral;
				position: relative;
				background: lightcoral;
				cursor: pointer;
				}
			#box span{
				color: #fff;
				font-size: 19px;
				}
			#box .detail{
				display: none;
				position: absolute;
				right: -1px;
				top: 38px;
				z-index: -1;
				box-sizing: border-box;
				width: 500px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				border: 1px solid lightcoral;
			}
			
		</style>
	</head>
	<body>
		<div id="box" >
			<span>购物车</span>
			<div class="detail" id="detail">
				购物车相关信息
			</div>
		</div>
		<script>
			//在整个文档中通过元素的ID获取到当前这个元素对象
			var box = document.getElementById('box');
			var detail = document.getElementById('detail');
			//元素对象
			box.onclick = function(){
				//元素对象.style.xxx = xxx 修改元素的某一个样式值
				//1.首先获取DETAIL原有的样式(显示还是隐藏): 元素.style.xxx就是获取某一个样式
				//前提：需要在元素行内设置这个样式才能获取到
				var n = detail.style.display ;
				if(n === 'none'){
					//当前是隐藏的，我们让其显示,修改detail样式
					detail.style.display = 'block' ;
					detail.style.background = 'lightcoral' ;
					detail.style.fontSize = '19px' ;
					detail.style.color = '#FFFFFF';
				}else{
					//当前是显示的，我们让其隐藏
					detail.style.display = 'none' ;
				}
			}
		</script>
	</body>
</html>

CSS 实现鼠标滑过显示详情

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标滑过详情</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				box-sizing: border-box;
				margin: 20px auto;
				width: 200px;
				height:40px;
				text-align: center;
				line-height: 40px;
				border: 1px solid lightcoral;
				position: relative;
				}
			#box .detail{
				display: none;
				position: absolute;
				right: -1px;
				top: 38px;
				z-index: -1;
				box-sizing: border-box;
				width: 500px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				border: 1px solid lightcoral;
			}
			#box:hover{
				border-bottom-color:#fff ;
				
			}
			#box:hover .detail{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span>购物车</span>
			<div class="detail">
				购物车相关信息
			</div>
		</div>
	</body>
</html>