锚标签在导航栏中不起作用

时间：2017-11-30 20:34:46

标签： javascript jquery html css anchor

我所有ul元素的锚标记都不起作用，这意味着当我将鼠标悬停在实际网站上时，他们不会点击，也没有任何反应。最后一个元素起作用（“联系”），但这是唯一有效的元素。我在网站上还有其他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 个答案:

答案 0 :(得分：1)

您的班级hero的排名为absolute，其中h1标签的maring-top为210px。这使得英雄div覆盖了按钮，因此使它们无法点击。

提示是了解您的浏览器的devtools，它是一个非常强大的调试工具。

由于英雄是绝对元素，因此请使用css property 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;
}

有保证金 enter image description here 顶部 enter image description here

答案 1 :(得分：0)

我相信你的问题在css文件的这一部分开始：

rx

你定义了英雄div来覆盖li，所以你不能再将它们悬停在它们上面了。每当你把鼠标放在它们上面时，它就会放在.hero div上而不会发出CSS所需的悬停事件。

我的建议是每当你被困这样右键点击并开始使用“inspect element”时。下次你会自己看到它。

你可以删除“position：absolute”然后就可以了。

相关问题
最新问题