ul列表中列表项hover蒙层尺寸和位置兼容性问题

最新推荐文章于 2024-08-05 18:19:21 发布

henouren

最新推荐文章于 2024-08-05 18:19:21 发布

阅读量777

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端开发软件工程文章标签： web前端 CSS HTML

本文链接：https://blog.youkuaiyun.com/henouren/article/details/77851467

web前端同时被 3 个专栏收录

27 篇文章

订阅专栏

开发

22 篇文章

订阅专栏

软件工程

1 篇文章

订阅专栏

本文介绍了一种在鼠标悬停于列表项时显示蒙层的方法。通过在列表项上添加一个初始状态为隐藏的蒙层div，利用CSS :hover 伪类使其可见，实现了列表项的视觉反馈效果。为了解决不同屏幕分辨率下的定位问题，采用了相对定位的父容器配合绝对定位的蒙层。

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

对于ul列表中，经常要求鼠标以上列表项着重显示，此时可以选择使用蒙层的方式，如图：

可以采用添加一个蒙层的div，设置其display:none，背景颜色以及透明度，当li:hover时，让其显示。在这个过程中，为了使蒙层显示在文字上方，需要定义pisotion:absolute以及大于列表项z-index的值。

然而，由于屏幕分辨率的问题，使用绝对定位将会造成位置显示错乱。

解决方法则是将蒙层div置于一个空div内，并设置其pisition:relative。

html代码：

<!--文章列表-->
				<div class="artical">
					<ul>
						<li class="articalItem">
							<div id="" class="mengbanTop">
								<div class="mengban"></div>
							</div>							
							<div class="articalList">
								<a href="#" title="artical" class="left articalLeft">
									<img src="img/封面21.jpg" alt="articalImg"  class="articalImg"/>
								</a>
								<div class="right articalRight">
									<a href="#" title="articalTitle" class="articalTitle">
										这是标题一
									</a>
									<div class="articalFrom">
										<a href="#" title="author" class="author">
											<img src="img/封面21.jpg" alt="authorImg"/>						
										</a>
										<span class="articalTime">    <a href="#" title="authorName">作者</a>    2017-9-4 11:20:39</span>
										<p class="articalDetail">这是详情这是详情这是详情这是详情这是详情这是详
											情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情
											……
										</p>
										<p class="articalInfo">
											<span>阅读 2.2K</span>
											    
											<span>收藏 2.2K</span>
											    
											<span>被赞 2.2K</span>
										</p>
									</div>
								</div>	
							</div>
						</li>
						<li class="articalItem">
							<div id="" class="mengbanTop">
								<div class="mengban"></div>
							</div>
							<div class="articalList">
								<a href="#" title="artical" class="left articalLeft">
									<img src="img/封面21.jpg" alt="articalImg"  class="articalImg"/>
								</a>
								<div class="right articalRight">
									<a href="#" title="articalTitle" class="articalTitle">
										这是标题一
									</a>
									<div class="articalFrom">
										<a href="#" title="author" class="author">
											<img src="img/封面21.jpg" alt="authorImg"/>						
										</a>
										<span class="articalTime">    <a href="#" title="authorName">作者</a>    2017-9-4 11:20:39</span>
										<p class="articalDetail">这是详情这是详情这是详情这是详情这是详情这是详
											情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情
											……
										</p>
										<p class="articalInfo">
											<span>阅读 2.2K</span>
											    
											<span>收藏 2.2K</span>
											    
											<span>被赞 2.2K</span>
										</p>
									</div>
								</div>	
							</div>
						</li>
					</ul>
				</div><!--文章列表end-->

CSS代码：

/*container artical*/
.container .artical .articalItem{
	width: 100%;
	height: 200px;
	overflow: hidden;
	/*padding-top: 30px;*/
	/*border-bottom: 1px solid #EEEEEE;*/
	border-top: 1px solid #EEEEEE;
	/*margin-top: 20px;*/
	z-index: 99px;
	margin: 0 auto;
}
.container .artical .mengbanTop{
	/*在蒙版的div之上再加一个relative的div，则可实现蒙版大小以及位置的兼容性问题*/
	position: relative;
}
.container .artical .mengban{
	width: 100%;
	height: 202px;
	display: none;
}
.container .artical .articalItem:hover .mengban{
	/*蒙版需要采用绝对定位，并将z-index的位置置于图片下方*/
	display:block;
	background-color: #EEEEEE;
	position:absolute;
	filter:alpha(opacity=30); 
	opacity:0.3;
	-moz-opacity:0.3;
	z-index: 9;	
	top: -20px;
}
.container .artical .articalItem .articalLeft{
	width:20%;
}
.container .artical .articalItem .articalRight{
	width:76%;
}
.container .artical .articalItem .articalLeft img{
	width:100%;
	height: 155px;
}
.container .artical .articalItem .articalRight .articalTitle{
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 18px;
	/*border: 1px solid #000000;*/
}
.container .artical .articalItem .articalRight .articalFrom{
	margin:10px 0 10px 0;
}
.container .artical .articalItem .articalRight .articalFrom .author{
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
}
.container .artical .articalItem .articalRight .articalFrom .author img{
	width: 50px;
	height: 50px;
	border-radius:50%;
}
.container .artical .articalItem .articalDetail{
	font-size: 14px;
	margin: 6px 0 6px 0;
}
.container .artical .articalItem .articalInfo{
	color: 	#ADADAD;
}