制作列表菜单的Hover效果

最新推荐文章于 2025-06-01 09:59:50 发布

原创最新推荐文章于 2025-06-01 09:59:50 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

css&css3 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何使用HTML和CSS创建一个具有吸引人的Hover效果的列表菜单。通过CSS选择器和过渡效果，为列表项添加动态变换，提升用户体验。

HTML

<div class="article">
  <h3>目的</h3>
  <p>这是一个简单的列表菜单，当你鼠标移到菜单项时，有一张图片慢慢的从左边向右边移动，并淡淡显示出来，而且此时的菜单项背景色和字体色也同时会改变。下面我们一起来简单的学习这种效果的制作。 </p>
</div>
<ul class="menu">
  <li> <a href="#"> <span>--</span> <span>首页</span> </a> <img src="pp.jpg" alt="image01"/> </li>
  <li> <a href="#"> <span>--</span> <span>照片墙</span> </a> <img src="pp.jpg" alt="image01"/> </li>
  <li> <a href="#"> <span>--</span> <span>语录本</span> </a> <img src="pp.jpg" alt="image01"/> </li>
</ul>

CSS

body {
	margin:0 auto;
	width:900px;
	padding:0;
	font-family:Microsoft yahei, Verdana, Geneva, sans-serif;
	font-size:16px;
}
.article h3 {
	font-size:18px;
	font-weight:bold;
	color:#51B148;
}
.article p {
	line-height:24px;
}
ul, ul li {
	list-style:none;
	margin:0;
	padding:0;
}
.menu {
	border:10px dashed #ddd;
	position:relative;
}
.menu li a {
	display:block;
	width:180px;
	height:80px;
	line-height:80px;
	border-right:1px solid #ddd;
	padding:0 10px;
	text-align:right;
	position:relative;
	z-index:10;
	background:rgba(255, 255, 255, 0.8);
	text-decoration:none;
}
/*设置列表项中a元素的背景色，并在悬停状态下改变他的背景色：*/
.menu li a:hover {
	text-decoration:none;
	background:rgba(225, 239, 240, 0.4);
}
/*改变每个列表项的第二个span的字体颜色*/
.menu li a span:nth-child(2) {
 font-weight:400;
 font-style: italic;
 font-size: 28px;
 -webkit-transition:color 0.3s linear;
 -moz-transition:color 0.3s linear;
 -o-transition:color 0.3s linear;
 transition:color 0.3s linear;
}
/*CSS3的伪类选择器:nth-child*/
.menu li:nth-child(1):hover span:nth-child(2) {
 color:#ae3637;
}
.menu li:nth-child(2):hover span:nth-child(2) {
 color:#c3d243;
}
.menu li:nth-child(3):hover span:nth-child(2) {
 color:#d38439;
}
.menu li:nth-child(4):hover span:nth-child(2) {
 color:#8e7463;
}
/*鼠标悬停状态时显示隐藏的img*/
.menu li img {
	position:absolute;
	z-index:1;
	left:0;
	top:0;
	opacity:0;
	-webkit-transition:left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-moz-transition:left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-o-transition:left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-ms-transition:left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	transition:left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.menu li:hover img {
	left:201px;
	opacity:1;
}

效果图: