您好我正在尝试创建一个网页网站。我能够使用圆圈在右侧创建导航,但它不显示标题(这是菜单的每个部分的名称。)
此网页是右侧菜单的示例。 http://jonathannicol.com/projects/parallax-scrolling/
这是我的CSS& HTML代码:
#fp-nav {
position: fixed;
z-index: 52;
top: 50%;
right: 15px;
padding: 0 10px 0 0;
-webkit-transition: opacity .3s 0s linear;
-moz-transition: opacity .3s 0s linear;
-ms-transition: opacity .3s 0s linear;
-o-transition: opacity .3s 0s linear;
transition: opacity .3s 0s linear;
transform: translatez(0);
-webkit-transform: translatez(0);
-webkit-backface-visibility: hidden;
}
#fp-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#fp-nav ul li {
margin: 0;
padding: 10px 0 10px 15px;
cursor: pointer;
}
.color-weight-light #fp-nav ul li.active a {
background-color: transparent;
border: solid 2px #000;
}
.color-weight-light #fp-nav ul li a {
background color: #000;
}
#fp-nav ul li.active a {
width: 8px;
height: 8px;
margin-left: -1px;
}
#fp-nav ul li a {
width: 10px;
height: 10px;
display: block;
text-decoration: none;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transition: background color .1s linear,border color .1s linear;
-moz-transition: background color .1s linear,border color .1s linear;
-ms-transition: background color .1s linear,border color .1s linear;
-o-transition: background color .1s linear,border color .1s linear;
transition: background color .1s linear,border color .1s linear;
background color: #000;
}
.color-weight-light#fp-nav ul li .nav-title {
color: #000;
}
.nav-title {
position: absolute;
right: 10px;
opacity: 1;
font-size: 13px;
text-transform: uppercase;
white-space: nowrap;
font-family: "brandon-grotesque";
letter-spacing: 3px;
font-weight: 400;
font-style: normal;
text-decoration: none;
margin-top: -11px;
padding: 0 0 5px 0;
-webkit-transition: all .3s cubic-beizer(.23,1,.32,1);
-moz-transition: all .3s cubic-beizer(.23,1,.32,1);
-ms-transition: all .3s cubic-beizer(.23,1,.32,1);
-o-transition: all .3s cubic-beizer(.23,1,.32,1);
transition: all .3s cubic-beizer(.23,1,.32,1);
line-height: 32px;
visibility: visible;
}

<script src="https://use.fontawesome.com/5a33902e83.js"></script>
<div id="fp-nav" style="margin-top: -46px;" class="color-weight-light">
<ul>
<li>
<a href="#top">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Home</span>
</a>
</li>
<li>
<a href="#content">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Slim Products</span>
</a>
</li>
<li>
<a href="#home-block-one">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Blogs</span>
</a>
</li>
<li>
<a href="#home-block-two">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Heatlh Products</span>
</a>
</li>
<li>
<a href="#home-block-three">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Video</span>
</a>
</li>
<li>
<a href="#home-block-four">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Skin Products</span>
</a>
</li>
</ul>
</div>
&#13;
无论如何我可以解决这个问题吗?谢谢!
答案 0 :(得分:1)
试试这个。在样式底部编辑的CSS。
#fp-nav {
position: fixed;
z-index: 52;
top: 50%;
right: 15px;
padding: 0 10px 0 0;
-webkit-transition: opacity .3s 0s linear;
-moz-transition: opacity .3s 0s linear;
-ms-transition: opacity .3s 0s linear;
-o-transition: opacity .3s 0s linear;
transition: opacity .3s 0s linear;
transform: translatez(0);
-webkit-transform: translatez(0);
-webkit-backface-visibility: hidden;
}
#fp-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#fp-nav ul li {
margin: 0;
padding: 10px 0 10px 15px;
cursor: pointer;
}
.color-weight-light #fp-nav ul li.active a {
background-color: transparent;
border: solid 2px #000;
}
.color-weight-light #fp-nav ul li a {
background color: #000;
}
#fp-nav ul li.active a {
width: 8px;
height: 8px;
margin-left: -1px;
}
#fp-nav ul li a {
width: 10px;
height: 10px;
display: block;
text-decoration: none;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transition: background color .1s linear,border color .1s linear;
-moz-transition: background color .1s linear,border color .1s linear;
-ms-transition: background color .1s linear,border color .1s linear;
-o-transition: background color .1s linear,border color .1s linear;
transition: background color .1s linear,border color .1s linear;
background color: #000;
}
.color-weight-light#fp-nav ul li .nav-title {
color: #000;
}
.nav-title {
opacity: 0;
visibility: visible;
position: absolute;
top: 0;
right: 20px;
text-align: right;
width: 200px;
transition:1s;
}
li:hover .nav-title {
opacity:1;
}
li a{
position:relative;
}
<script src="https://use.fontawesome.com/5a33902e83.js"></script>
<div id="fp-nav" style="margin-top: -46px;" class="color-weight-light">
<ul>
<li>
<a href="#top">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Home</span>
</a>
</li>
<li>
<a href="#content">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Slim Products</span>
</a>
</li>
<li>
<a href="#home-block-one">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Blogs</span>
</a>
</li>
<li>
<a href="#home-block-two">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Heatlh Products</span>
</a>
</li>
<li>
<a href="#home-block-three">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Video</span>
</a>
</li>
<li>
<a href="#home-block-four">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="nav-title">Skin Products</span>
</a>
</li>
</ul>
</div>
答案 1 :(得分:0)
请你改变风格......
.nav-title { opacity: 1; visibility: visible; }