JQuery移入移出排行榜

最新推荐文章于 2022-12-31 19:34:18 发布

weixin_46612232

最新推荐文章于 2022-12-31 19:34:18 发布

阅读量64

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_46612232/article/details/111951923

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这是一个关于网页交互设计的示例。通过CSS和JavaScript实现了排行榜列表项的悬停效果，当鼠标移入列表项时，显示详细内容，包括图片和简介；移出时隐藏。代码中使用了jQuery库来简化事件处理，增强了用户体验。

摘要由CSDN通过智能技术生成

<head>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.box{
			width:300px;
			height:450px;
			margin:50px auto;
			border:1px solid #000;
		}
		.box>h1 {
			font-size:20px;
			line-height:35px;
			color: deeppink;
			padding-left: 10px;
			border-bottom: 1px dashed #ccc;
		}
		.ul>li{
			list-style:none;
			padding: 5px 10px;
			boder:1px dashed #ccc;
		}
		ul>li:nth-child(-n+3) span{
			background: deeppink;
		}
		ul>li>span{
			display:inline-block;
			width:20px;
			height:20px;
			background:#ccc;
			text-align:center;
			line-height:20px;
			margin-right:10px;
		}
		.content{
			overflow:hidden;
			margin-left:5px;
			display:none;
		}
		.content>img{
			width:80px;
			height:120px;
			float:left;
		}
		.content>p{
			width:180px;
			height:120px;
			float:right;
			font-size:12px;
			line-height:20px;
		}
		.current .content{
			display:block;
		}
	</style>
	<script src="js/jquery-1.12.4.js"></script>
	<script>
		$(function(){
		/*
			//监听li的移入事件
			$("li").mouseenter(function(){
				$(this).addClass("current");
			});
			//监听移出事件
			$("li").mouseleave(function(){
				$(this).removeClass("current");
			});*/
			$("li").hover(function(){
				$(this).addClass("current");
			},function(){
				$(this).removeClass("current");
			})
		});
	</script>
</head>
<body>
<div class="box">
	<h1>排行榜</h1>
	<ul>
		<li><span>1</span>名称
			<div class="content">
				<img src="image/lg.png" alt="">
				<p>简介：故事发生在一个大海上面，撒旦法撒旦法撒旦光的反射光的反射第三方公司的分公司的个人跳河人家饿死吧</p>
			</div>
		</li>
		<li><span>2</span>名称
			<div class="content">
				<img src="image/lg.png" alt="">
				<p>简介：故事发生在一个大海上面，撒旦法撒旦法撒旦光的反射光的反射第三方公司的分公司的个人跳河人家饿死吧</p>
			</div>
		</li>
		<li><span>3</span>名称</li>
		<li><span>4</span>名称</li>
		<li><span>5</span>名称</li>
	</ul>
</div>
</body>