堆棧內存溢出
  簡體   English   中英

定位標記在導航欄中不起作用

[英]Anchor tags are not working in navigation bar

 原文  2017-11-30 20:34:45  8   2    javascript/ jquery/ html/ css/ anchor

問題描述

我所有ul元素的錨標記都無法正常工作，這意味着當我將鼠標懸停在實際站點上的錨標記上時，它們不會單擊並且什么也沒有發生。 最后一個元素起作用（“ Contact”），但這是唯一起作用的元素。 我也有其他的a網站上的標簽和除這些對他們的工作ul 。

這是我的HTML： 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="footer, address, phone, icons" />

    <title>Ask Uptown</title>
    <link rel="stylesheet" href="pp.css">
    <link href="https://fonts.googleapis.com/css?family=Abel|Raleway|Signika|Signika+Negative" rel="stylesheet">
  <body>
    <header>
      <div class="row">
        <div class="logo">
          <h3 class="logo-text">Uptown<span>Ask</span></h3>
        </div>

        <ul id="main-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Stuck? Ask a question!</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Sign up</a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div>

      <div class="hero">
        <h1>Start Asking now</h1>

        <div class="buttons">
          <a href="#" class="btn btn-one">Ask Now!</a>
          <a href="#" class="btn btn-two">Sign Up Now!</a>
        </div>

      </div>

    </header>
    <section>
      <div class="about">
        <h1>How Uptown Ask works?</h1>
        <p class="paragraph-about">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </section>
    <section>
      <div class="section">
        <div class="card-pic">
          <h4>Ask A Question</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="card-pic-two">
          <h4>Get An Answer</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="card-pic-three">
          <h4>Use The Answer</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </section>


            <footer class="footer-distributed">

                <div class="footer-left">

                    <h3>Uptown<span>Ask</span></h3>

                    <p class="footer-links">
                        <a href="#">Home</a>
                        ·
                        <a href="#">Blog</a>
                        ·
                        <a href="#">About</a>
                        ·
                        <a href="#">Contact</a>
                    </p>

                    <p class="footer-company-name">Ask Uptown &copy; 2017</p>
                </div>

                <div class="footer-center">

                    <div class="adress-sec">
                        <p class="p-adress">Address: Tripoli Street, Algeria Road, Mirdif Area - Dubai, United Arab Emirtes</p>
                    </div>

                    <div class="phone-sec">
                        <p>Phone: 04 251 5001</p>
                    </div>

                    <div class="email-sec">
                        <p class="p-email"><a href="mailto:rayanza3eem1234@gmail.com">Email: Uptownschool@gmail.com</a></p>
                    </div>

                </div>

                <div class="footer-right">

                    <p class="footer-company-about">
                        <span>About the company</span>
                        Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
                    </p>

                    <div class="icons">

                        <a href="https://www.twitter.com" target="_blank"><img src="twitter.png" alt="Twitter" class="twitter" ></a>
                        <a href="https://www.facebook.com" target="_blank"><img src="facebook.png" alt="Facebook" class="facebook" ></a>
                        <a href="https://www.instagram.com" target="_blank"><img src="insta.png" alt="Instagram" class="instagram" ></a>

                    </div>

                </div>

            </footer>

  </body>
</html>
code here

而我的CSS： 

* {
  margin: 0;
  padding: 0;
}

header {
  background-image:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(uptown.jpg);
  height: 65vh;
  background-size: cover;
  background-position: center;
}


.logo img{
  width: 190px;
  height: 65px;
  float: left;
  margin-top: 18px;
}

body{
  font-family: 'Abel', sans-serif;
}

.row{
  width: 1200px;
  margin: auto;
}

.hero{
  position: absolute;
  width: 1200px;
  margin-left: 0;
  margin-top: 0;
}

h1{
  color: white;
  font-size: 40px;
  text-align: center;
  margin-top: 210px;
  margin-left: 55px;
}

.buttons{
  margin-top: 15px;
  margin-left: 490px;
}

.btn{
  border: 1px solid white;
  padding: 10px 30px;
  color: white;
  text-decoration: none;
  margin-right: 10px;
}

.buttons a:hover{
  background-color: #cdc9c9;
  transition: all 0.5s ease-in;
}

.about{
  width: 100%;
  height: 300px;
  color: #F4F7F8;
}
.about h1{
  color: black;
  margin-top: 60px;
  margin-left: 2px;
  font-family: 'Signika Negative', sans-serif;
  font-weight: 500;
  font-size: 35px;
}

.paragraph-about{
  color:black;
  font-family: 'Signika Negative', sans-serif;
  margin-left: 70px;
  margin-right: 60px;
  margin-top: 30px;
}

.section{
  width: 100%;
  height: 350px;
  background-color: #F4F7F8;
}


.card-pic{
  background-color: #fff;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 60px;
  top: 870px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
}

.card-pic h4 {
  text-align: center;
  font-size: 25px;
  margin-top: 20px;
}

.card-pic p{
  text-align: center;
  margin-left: 20px;
  margin-right: 12px;
}


.card-pic-two{
  background-color: #fff;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 485px;
  top: 870px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
}
.card-pic-two h4{
  text-align: center;
  font-size: 25px;
  margin-top: 20px;
}

.card-pic-two p{
  text-align: center;
  margin-left: 20px;
  margin-right: 12px;
}

.card-pic-three{
  background-color: #fff;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 900px;
  top: 870px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
}
.card-pic-three h4{
  text-align: center;
  font-size: 25px;
  margin-top: 20px;
}

.card-pic-three p{
  text-align: center;
  margin-left: 20px;
  margin-right: 12px;
}

#main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

#main-nav li {
  display: inline-block;
}

#main-nav li a {
  color: white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: 'Signika', sans-serif;
  font-size: 19px;
}

#main-nav li.active a {
  border: 1px solid white;
}

#main-nav li:hover a {
  border: 1px solid white;
}

.footer-distributed{
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;

    padding: 55px 50px;
    margin-top: 80px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
    display: inline-block;
    vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
    width: 40%;
}

/* The company logo */

.footer-distributed h3{
    color:  #ffffff;
    font: normal 36px 'Cookie', cursive;
    margin: 0;
}

.footer-distributed h3 span{
    color:  #5383d3;
}

/* Footer links */

.footer-distributed .footer-links{
    color:  #ffffff;
    margin: 20px 0 12px;
    padding: 0;
}

.footer-distributed .footer-links a{
    display:inline-block;
    line-height: 1.8;
    text-decoration: none;
    color:  inherit;
}

.footer-distributed .footer-company-name{
    color:  #8f9296;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
    width: 35%;
}

.footer-distributed .footer-center i{
    background-color:  #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
    font-size: 17px;
    line-height: 38px;
}

.footer-distributed .footer-center p{
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin:0;
}

.footer-distributed .footer-center p span{
    display:block;
    font-weight: normal;
    font-size:14px;
    line-height:2;
}

.footer-distributed .footer-center p a{
    color:  #5383d3;
    text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
    width: 20%;
}

.footer-distributed .footer-company-about{
    line-height: 20px;
    color:  #92999f;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
}

.footer-distributed .footer-company-about span{
    display: block;
    color:  #ffffff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.footer-distributed .footer-icons{
    margin-top: 25px;
}

.footer-distributed .footer-icons a{
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color:  #33383b;
    border-radius: 2px;

    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;

    margin-right: 3px;
    margin-bottom: 5px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

    .footer-distributed{
        font: bold 14px sans-serif;
    }

    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }

    .footer-distributed .footer-center i{
        margin-left: 0;
    }

}

.twitter{
  width: 42px;
  height: 42px;
}


.facebook{
  width: 42px;
  height: 42px;
}

.instagram {
  width: 40px;
  height: 40px;
}

.icons{
  margin-top: 20px;
}


.adress{
  width: 30px;
  height: 30px;
  margin-right: 40px;
}

.email{
  width: 40px;
  height: 40px;
}

.phone{
  width: 20px;
  height: 20px;
}

.adress-sec{
  margin-bottom: 25px;
}

.phone-sec{
  margin-bottom: 20px;
}

.logo-text{
    color:  #ffffff;
    font: normal 36px 'Cookie', cursive;
    margin: 0;
    margin-top: 12px;
    float: left;
}

.logo-text span{
  color: #5383d3;
}

如果我在主導航上刪除了float: right命令，它可以工作，但是不在正確的地方。

2 個解決方案

解決方案1
 1 已采納  2017-11-30 20:54:43

您的職業hero的位置是absolute並且內部的h1標簽maring-top為210px。 這使英雄div覆蓋了按鈕，因此使它們不可單擊。

提示是要了解您的瀏覽器的devtool，這是一個非常強大的調試工具。

由於hero是絕對元素，因此請使用css屬性top，而不要使用margin-top 。 這不會影響其他元素。 在開發人員控制台中查看： 

.hero{
  position: absolute;
  width: 1200px;
  margin-left: 0;
  margin-top: 0;
  top: 210px;
}

h1{
  color: white;
  font-size: 40px;
  text-align: center;
  margin-left: 55px;
}

有余地 在此處輸入圖片說明 帶頂 在此處輸入圖片說明

解決方案2
 0  2017-11-30 21:03:12

我相信您的問題開始於CSS文件的這一部分： 

.hero{
  position: absolute;
  width: 1200px;
  margin-left: 0;
  margin-top: 0;
}

您將hero div定義為覆蓋li的對象，因此您無法將它們懸停在上面。無論何時將鼠標懸停在它們的.hero div上，都不會發出CSS所需的懸停事件。

我的建議是，每當您像這樣右鍵單擊而陷入困境並開始使用“檢查元素”時。 下次您會自己看到它。

您可以刪除“ position：absolute”，然后它將起作用。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 導航錨標記不起作用，但是為什么呢？ 如何不在側面導航和頂部導航欄中定位定位標記 沒有帶錨標簽的重新加載導航 粘性導航欄<a>標簽</a> 錨標記在IE8中不起作用 錨標簽在jquery滑塊中不起作用 我的錨標簽不起作用。 動態插入的錨標簽不起作用 JQuery Smooth Scroll to Anchor with Sticky Navigation Bar 響應式導航欄不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM