Question

我正在尝试使用html和css构建一个网站。我有一个侧面导航栏，如下所示plunker

/* Styles go here */

body {
	margin :0;
	border :0;
	background-color:#222;
	
}
* {
	box-sizing : border-box;
}
.main-header {
	position : absolute ;
	width : 100% ;
	height : 56px;
	background-color : #55d6aa;
	z-index:4;
	
}

.main-content {
	padding-top :46px;
	
}

.side-nav {
    position : absolute;
    width:80px ;
    
    height:100vh;
    z-index:3;
    padding-top:44px;
    
   
}





.side-nav ul {
	list-style :0;
	padding :0;
	margin:0;
}

.side-nav ul li {
	padding : 20px 10px;
	border-bottom :1px solid #333;
	transition: width 2s;
	
}



.side-nav ul li:hover #item
{
display:inline-block;
vertical-align: middle;
width:200px;
float:center;
	
} 
.side-nav ul li:hover #sidebarIcon
{
	float:fixed;
}
#item {
	transition-timing-function: linear;
	
	font-size:16px;
	
}








	
.side-nav ul li a {
	color:#fff;
	text-decoration : none;
	
}



.side-nav ul li a i {
	color: #fff;
	 -webkit-transition: width 1s;
    transition: width 1s; 
}

@media screen and (min-width: 100px)
{
	.side-nav {
	width :80px;
	}
	
	.side-nav ul li {
	text-align: center;
	}
	
	.side-nav ul li span:nth-child(2) {
	display:none;
	}
	
	.side-nav ul li i {
	font-size:  26px;
		}
	
	.main-content {
	
	margin-left:85px;
	}
	
}

@media screen and (min-width: 1000px)
{
	
	.side-nav {
	width :80px;
	}
	
	.side-nav ul li {
	text-align: center;
	}
	
	.side-nav ul li span:nth-child(2) {
	display:none;
	}
	
	.side-nav ul li i {
	font-size:  26px;
	}
	
	.main-content {
	
	margin-left:85px;
	}
	
	
	
	
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  </head>

  <body>
    <div class="main-header">
<a href="#" class="nav-trigger"><span></span></a>
</div>

	<div class="side-nav">
		<nav>
			<ul>
				<li><a href="#"> <span><i class="fa fa-calendar" id="sidebarIcon"></i></span>
						<span class="sideMenuItem" id="item">Text 1</span>
				</a></li>

				<li><a href="#"> <span><i class="fa fa-hourglass-2" id="sidebarIcon" ></i></span>
						<span class="sideMenuItem" id="item">Text 2</span>

				</a></li>
				
				<li><a href="#"> <span><i class="fa fa-hourglass-2" id="sidebarIcon"></i></span>
						<span class="sideMenuItem" id="item">Text 3</span>

				</a></li>
				
				<li><a href="#"> <span><i class="fa fa-hourglass-2" id="sidebarIcon"></i></span>
						<span class="sideMenuItem" id="item">Text 4</span>

				</a></li>
				

			</ul>
		</nav>
	</div>

	<div class="main-content">
		<p>asjjasjlasj</p>
	</div>

  </body>

</html>

代码的问题在于，当我将鼠标悬停在图标上时，文本值不会与图标内联显示。另外，我想在文本中添加从左到右的过渡效果，同时显示在悬停时icon.Both事情没有用。请建议我如何处理这个问题

Answer 1

显示文字需要更改的内容：

标记p是块级元素，需要将其更改为display:inline-block div中的main-content
CSS .side-nav ul li:hover #item包含float:center，其中没有任何内容作为浮动中心
我认为您需要更改dom结构以使其正确对齐我确定前两个但不是关于这一个，如果你想做它需要更多的CSS，我的意思是它会产生很多混淆，并且可能看起来很奇怪这个结构。

对于动画，你需要使用不透明度和可见性，其中显示属性不能被动画，但它可能占用空间也很尴尬。因此，如果按照上述步骤操作，您将完美地完成它。

This will help you with animation并且要更改DOM，请尝试“文本1”将其置于p标记附近，或者您需要提供更多代码才能完美地更改它。否则改变CSS将无济于事。

显示内嵌文本，图标和文本转换不起作用

1 个答案: