jquery - 为什么只有我的按钮文字可点击？

<分区>

我确信这是一个简单的修复，但是......我一直在尝试让整个按钮都可以点击，但我就是想不出来。我已经用链接附上了整个按钮，只有文本是超链接的……有什么想法吗？如您所见，我一直在努力使其适合移动设备，这就是重复按钮的原因。

这是我的代码:

<head>
<style>
body {
    background-color: #e3e3e3;
    margin: 0 auto;
    padding: 0;
    font-family: Arial;
}
.header {
    background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    border: 1px solid #000;
    text-align: center;
    height: 700px;
    }

.mobilelinks {display: none;}

.wrapper {
    margin: 50px;
}

#footer {
    text-align: center;
}

#footer a {
    color: #666;
    margin-left: 8px;
}

#footer a:hover {
    color: #222;
    text-decoration: underline;
}

h1 {
    color: white;
    font-family: Arial;
    font-size: 72px;
    letter-spacing: 1px;
        margin-top:150px;
}
h2 {
    color: #525252;
    font-size: 40px;
    letter-spacing: 1px;
    text-align: center;

}
h3 {
    color:  #1c86ee;
    font-size: 25px;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;

}
p {
    font-family: Gill Sans, sans-serif;
    color:#696969;
    font-size: 17px;
    text-align: center;
    line-height: 150%;
    padding-bottom: 7px;
}
a {
    color: white;
    text-decoration:none;
}

ul li {
    text-align: center;
    line-height: 40px;
    display: inline-block;
    letter-spacing: 1px;
    background-color: rgba(5, 4, 2, 0.1);
    border: 2px solid white;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 90%;
    width: 150px;
    height: 40px;
        margin-left: 10%;
        margin-top: 0%;


}

ul li:hover {
    background-color: white;
}
ul li:hover > a {
    color: #000;
}
ul {
margin-right: 10%;
}
@media screen and (max-width: 750px) {
    .header {height: 100vh;}
        ul li {margin-top: 0%;}
h1{margin-top:30px;}

}
@media screen and (max-width: 500px) {
    h1 {
        font-size: 52px;
        margin-top:30px;
    }
    ul li {margin-top: 0%;}
        .links {display: none;}
    .mobilelinks {display: inline-block;}
}


@media screen and (max-width: 750px) {
    .header {height: 300px;}
    ul li {margin-top: 0%;}
ul li{
   margin-left: 2px;
   margin-top: 5px;
   margin-bottom: 0px;
   width: 100px;
   height:35px;
   top: 580px;
  }
h1{

        margin-top:30px;
}
}
@media screen and (max-width: 500px) {
    h1 {
        font-size: 52px;
        margin-top:30px;
    }
    .links {display: none;}
    ul li {margin-top: 0%;}
    .mobilelinks {display: inline-block;}
ul li{
   margin-left: 2px;
   margin-top: 5px;
   margin-bottom: 0px;
   width: 100px;
   height:35px;
   top: 580px;
  }

}
@media screen and (max-width: 400px) {
    .header {height: 100vh;}
    .mobile-terms { display: none;}
    h1 {
        font-size: 36px;
        margin-top:30px;
    }
    h2 {
        font-size: 22px;
    }
ul li{
   margin-left: 2px;
   margin-top: 5px;
   margin-bottom: 0px;
   width: 100px;
   height:35px;
   top: 580px;
  }

}
hr {
margin-left:120px;
margin-right:120px;
}


}

ul {
margin-right: 10%;
}


}
</style>
<title>About Me</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="about.css">
</head>
<body>
    <div class="header">
        <h1>Who I Am</h1>
            <ul class="links">
        <li><a href="www.youtube.com"><strong>CONTACT</strong></a></li>
        <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
        <li><a href="#middle"><strong>RESUME</strong></a></li>
        <li><a href="index.html"><strong>HOME</strong></a></li>
            </ul>
            <ul class="mobilelinks">
                <li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
                <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
                <li><a href="#middle"><strong>RESUME</strong></a></li>
                <li><a href="index.html"><strong>HOME</strong></a></li>
            </ul>
    </div>
    <div id="mainwrapper">
        <div class="wrapper">
            <h2>Some Fun Facts</h2>
                <p>
                I made this website from scratch when I was 14, <br>
                I have a twin brother whose name is Pierson McNeal White, <br>
                I have a older brother and sister who are also twins, <br>
                I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
                and I watch the super bowl for the ads.
                </p>
        </div>
        <hr>
        <div class="wrapper">
            <h2>Hobbies</h2>
                <h3>Movies</h3>
                <p class="movies">
                On the weekends my mother and I like to watch movies.<br> 
                We are really the only ones in the family who really enjoy the cinema culture.<br>
                Although sometimes if it is a really popular movie we will all go like The Hunger Games.<br>
                </p>
                    <h3>Programming</h3>
                    <p class="code">
                    I like to code websites like this.<br>
                    I find it relaxing and fun<br> 
                    (unless there is an impossible bug)<br>
                    </p>
                        <h3>Bikeing</h3>
                        <p class="bike">
                        I like to bike with my dad when I’m stressed or we are both open.<br>
                        The bike I use now I got for Christmas and I love it. I find it a great escape.<br>
                        </p>
                            <h3>Reading</h3>
                            <p class="read">
                            I love to read.<br>
                            My dad got me into the classics like 1984 (creepy but cool)<br>
                            animal farm (still creepy but still cool)<br>
                            Ann Rand (thought provoking the future really is pretty scary)<br>
                            And fountain head (really long!).<br>
                            </p>
                                <h3>Video Games</h3>
                                <p class="games">
                                I like to play strategy games with my friends.<br>
                                Talking through skype and that is really fun because we can’t always see each other in person<br>
                                so video games are a way to see each other and hang out!<br>
                                </p>
        </div>
    </div>
    <div id="footer">
            Copyright &copy;&nbsp;<script>document.write(new Date().getFullYear())</script>&nbsp;Morgan.
          <div>
            <a href="#">Link</a>
            <a href="#">Privacy Policy</a>
            <a href="#">Terms<span class="mobile-terms"> of Service</span></a>
          </div>
    </div>

最佳答案

尝试添加