0
我想建立一個網站使用HTML和css.I顯示文本內嵌有一個導航欄邊這裏plunker與圖標和文本過渡不工作
/* Styles go here */
body {
\t margin :0;
\t border :0;
\t background-color:#222;
\t
}
* {
\t box-sizing : border-box;
}
.main-header {
\t position : absolute ;
\t width : 100% ;
\t height : 56px;
\t background-color : #55d6aa;
\t z-index:4;
\t
}
.main-content {
\t padding-top :46px;
\t
}
.side-nav {
position : absolute;
width:80px ;
height:100vh;
z-index:3;
padding-top:44px;
}
.side-nav ul {
\t list-style :0;
\t padding :0;
\t margin:0;
}
.side-nav ul li {
\t padding : 20px 10px;
\t border-bottom :1px solid #333;
\t transition: width 2s;
\t
}
.side-nav ul li:hover #item
{
display:inline-block;
vertical-align: middle;
width:200px;
float:center;
\t
}
.side-nav ul li:hover #sidebarIcon
{
\t float:fixed;
}
#item {
\t transition-timing-function: linear;
\t
\t font-size:16px;
\t
}
\t
.side-nav ul li a {
\t color:#fff;
\t text-decoration : none;
\t
}
.side-nav ul li a i {
\t color: #fff;
\t -webkit-transition: width 1s;
transition: width 1s;
}
@media screen and (min-width: 100px)
{
\t .side-nav {
\t width :80px;
\t }
\t
\t .side-nav ul li {
\t text-align: center;
\t }
\t
\t .side-nav ul li span:nth-child(2) {
\t display:none;
\t }
\t
\t .side-nav ul li i {
\t font-size: 26px;
\t \t }
\t
\t .main-content {
\t
\t margin-left:85px;
\t }
\t
}
@media screen and (min-width: 1000px)
{
\t
\t .side-nav {
\t width :80px;
\t }
\t
\t .side-nav ul li {
\t text-align: center;
\t }
\t
\t .side-nav ul li span:nth-child(2) {
\t display:none;
\t }
\t
\t .side-nav ul li i {
\t font-size: 26px;
\t }
\t
\t .main-content {
\t
\t margin-left:85px;
\t }
\t
\t
\t
\t
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet"
\t 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>
\t <div class="side-nav">
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <li><a href="#"> <span><i class="fa fa-calendar" id="sidebarIcon"></i></span>
\t \t \t \t \t \t <span class="sideMenuItem" id="item">Text 1</span>
\t \t \t \t </a></li>
\t \t \t \t <li><a href="#"> <span><i class="fa fa-hourglass-2" id="sidebarIcon" ></i></span>
\t \t \t \t \t \t <span class="sideMenuItem" id="item">Text 2</span>
\t \t \t \t </a></li>
\t \t \t \t
\t \t \t \t <li><a href="#"> <span><i class="fa fa-hourglass-2" id="sidebarIcon"></i></span>
\t \t \t \t \t \t <span class="sideMenuItem" id="item">Text 3</span>
\t \t \t \t </a></li>
\t \t \t \t
\t \t \t \t <li><a href="#"> <span><i class="fa fa-hourglass-2" id="sidebarIcon"></i></span>
\t \t \t \t \t \t <span class="sideMenuItem" id="item">Text 4</span>
\t \t \t \t </a></li>
\t \t \t \t
\t \t \t </ul>
\t \t </nav>
\t </div>
\t <div class="main-content">
\t \t <p>asjjasjlasj</p>
\t </div>
</body>
</html>問題出與代碼是，當我將鼠標懸停在圖標上的文本值不顯示與圖標內聯。此外，我想添加一個過渡效果，從左到右的文字，而它揭示了懸停圖標。沒有working.Please建議我如何去問題
把dom結構改成什麼？並且你可以編輯plunker並顯示文字動畫，或者直接給我合適的在線教程。我找不到任何與文字相關的文字 –
查看我編輯的答案。 –