我正处于整理网页的初期阶段，我想创建一个像这样的点导航菜单：http://globalthinkers.foreignpolicy.com/#main
我敢肯定我写的代码正确，但是导航菜单的工具提示部分不起作用。我在下面粘贴了我的代码。任何帮助，将不胜感激！
body {
background-color: #FFFFFF;
background-size: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
#block1 {
background-image: url("http://mchdata.com/wp-content/uploads/2014/10/hospital.jpg");
background-size: 100%;
background-repeat: no-repeat;
font-size: 200%;
}
#block2 {
background-image: url("http://allenhardwick.com/wp-content/uploads/2014/01/inside_house.jpg");
background-size: 100%;
background-repeat: no-repeat;
font-size: 200%;
color: white;
}
#block3 {
background-color: #7CE87C;
background-size: 100%;
background-repeat: no-repeat;
font-size: 200%;
color: white;
}
#block4 {
background-color: #7C8CE8;
background-size: 100%;
background-repeat: no-repeat;
font-size: 200%;
color: white;
}
#block5 {
background-color: #E87C83;
background-size: 100%;
background-repeat: no-repeat;
font-size: 200%;
color: white;
}
@media screen and (min-width: 535px){#brand-tagline{font-size:20px;font-size:2rem}}
#dotsNav li{
position:relative;
display:block;
margin:30px 0;
width: 9px;
height: 9px;
cursor:pointer;
}
#dotsNav {
z-index: 9992;
}
#dotsNav.pagination{
position: fixed;
}
#dotsNav ul {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#dotsNav li a {
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
border-radius: 50%;
background-color: #9d9d9d;
text-indent: -999em; /* make the text accessible to screen readers */
cursor: pointer;
position: absolute;
}
#dotsNav li a:focus {
outline: none;
}
#dotsNav li a:focus {
outline: none;
}
#dotsNav li a {
overflow: hidden;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#dotsNav li a:hover{
transform: scale(1.5);
}
#dotsNav li a::after {
content: '';
position: absolute;
bottom: 0;
height: 0;
left: 0;
width: 100%;
background-color: #fff;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
#dotsNav li a:hover::after {
height: 100%;
}
#dotsNav li.active a::after {
height: 100%;
}
#dotsNav li.active a{
-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.6);
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.6);
}
#dotsNav .pp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: Helvetica, sans-serif;
letter-spacing: 1px;
white-space: nowrap;
max-width: 220px;
text-transform: uppercase;
}
#dotsNav .pp-tooltip.left {
right: 20px;
}
#dotsNav .pp-tooltip.left a{
font-size: 14px;
font-family: Helvetica;
overflow: none;
}
#dotsNav .pp-tooltip{
position:absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: Helvetica, sans-serif;
letter-spacing: 1px;
white-space: nowrap;
max-width: 220px;
text-transform: uppercase;
}
#dotsNav .pp-slidesNav span {
top: 2px;
left: 2px;
width: 8px;
height: 8px;
border: 1px solid #000;
background: rgba(0, 0, 0, 0);
border-radius: 50%;
position: absolute;
z-index: 1;
}
#dotsNav.pagination{
position:fixed;
}
#dotsNav .pp-slidesNav span {
top: 2px;
left: 2px;
width: 8px;
height: 8px;
border: 1px solid #000;
background: rgba(0, 0, 0, 0);
border-radius: 50%;
position: absolute;
z-index: 1;
}
.pagination {
padding: 0;
list-style: none;
position: absolute;
right: 41px;
top: 50%;
margin: -126px 0 0;
z-index: 1;
}
.pagination li { margin: 0 0 12px; }
.pagination a {
text-indent: -9999px;
overflow: hidden;
display: block;
width: 9px;
height: 9px;
border-radius: 50%;
background: #9d9d9d;
}
.pagionation .active a
#wrapper{
margin-top: -92px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>HEALTH CARE REFORM EXPLAINED</title>
</head>
<body>
<div id="wrapper">
<ul class="pagination" id="dotsNav">
<li data-menuanchor="block1">
<a href="block1">Block 1</a>
</li>
<li data-menuanchor="block2">
<a href="#block2">Block 2</a>
</li>
<li data-menuanchor="block3">
<a href="#block3">Block 3</a>
</li>
<li data-menuanchor="block4">
<a href="#block4">Block 4</a>
</li>
<li data-menuanchor="block5">
<a href="#block5">Block 5</a>
</li>
</ul>
</div>
<div class="container">
<div id="block1">
<div style="color:white; margin:40px; padding:40px;">
<h2>HEALTH CARE REFORM EXPLAINED</h2>
</div>
</div>
<div id="block2"
<div style="color:white; margin:40px; padding:40px;">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</div>
<div id="block3"
<div style="background-color: black; color:white; margin:40px; padding:40px;">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</div>
<div id="block4"
<div style="color:black; margin:40px; padding:40px;">
<h2>London</h2>
<p>
I been drankin, I been drankin.
</p>
</div>
</div>
<div id="block5"
<div style="color:black; margin:40px; padding:40px;">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</div>
</div>
</body>
</html>最佳答案
哦，你错过了＃
这是你的:)
<li data-menuanchor="block1">
<a href="#block1">Block 1</a>
</li>祝好运！
关于html - 我的CSS导航菜单上的工具提示不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26986659/