Question

我在组建网页的初始阶段，我想创建一个像这样的点导航菜单：http：//globalthinkers.foreignpolicy.com/#main

我非常确定我正确编写了代码，但导航菜单的工具提示部分却无法正常工作。我在下面粘贴了我的代码。任何帮助将不胜感激！

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

你错过了＃

在这里你是：）

<li data-menuanchor="block1">
<a href="#block1">Block 1</a>
</li>

祝你好运！

Answer 2

使用以下代码更新/替换包装 div。

<div id="wrapper">
    <ul class="pagination" id="dotsNav">
        <li data-menuanchor="block1" title="block1 tooltip">
            <a href="block1">Block 1</a>
        </li>

        <li data-menuanchor="block2" title="block2 tooltip">
            <a href="#block2">Block 2</a>
        </li>

        <li data-menuanchor="block3" title="block3 tooltip">
            <a href="#block3">Block 3</a>
        </li>

        <li data-menuanchor="block4" title="block4 tooltip">
            <a href="#block4">Block 4</a>
        </li>

        <li data-menuanchor="block5" title="block5 tooltip">
            <a href="#block5">Block 5</a>
        </li>
    </ul>
</div>

根据要求更改/更新工具提示文本。

Screenshot of updated/running code

我的CSS导航菜单上的工具提示无效

2 个答案: