html - 文字装饰不起作用？在html/css中

好的，所以我在列表中放了一个背景并阻止了，但是现在文本是超链接的，只有文本是可单击的。我在干什么？我需要整个框都可单击，文本必须是白色，直到您在其上滚动然后将其变成黑色。还有，有没有一种方法可以使移动框之间彼此靠得更近？

body {
  background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
  background-size: 100%;
  background-color: #3D5771;
  margin: 0;
  padding: 0;
}

h1 {
  position: absolute;
  top: 23%;
  left: 30%;
  color: white;
  font-family: Arial;
  font-size: 4.6vw;
  letter-spacing: 1px;
}

p {
  position: absolute;
  width: 250px;
  top: -1px;
  left: 15px;
  height: 25px;
  font-family: Arial;
}

ul {
  word-spacing: .2em;
  letter-spacing: .2em;
}

ul li {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  top: 43%;
  display: inline-block;
  margin-top: 250px;
  margin-left: 115px;
  letter-spacing: 1px;
  word-spacing: normal;
  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;
}

ul li:link,
ul li:visited {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  display: inline-block;
  margin-top: 250px;
  margin-left: 115px;
  letter-spacing: 1px;
  word-spacing: normal;
  background-color: rgba(5, 4, 2, 0.1);
  border: 2px solid white;
  font-size: 90%;
  width: 150px;
  height: 40px;
  text-decoration: none;
  color: white;
}

li {
  text-decoration: none;
  color: white;
}

ul li:hover,
ul li:active {
  background-color: white;
  color: black;
  text-decoration: none;
}

<center>
  <h1>A Girl With A Passion</h1>
</center>
<ul>
  <li><a href="www.youtube.com" class="life"><strong>MY LIFE</strong></a>
  </li>
  <li><a href="www.youtube.com" class="prot"><strong>PORTFOLIO</strong></a>
  </li>
  <li><a href="www.youtube.com" class="resume"><strong>RESUME</strong></a>
  </li>
  <li><a href="www.youtube.com" class="me"><strong>ABOUT ME</strong></a>
  </li>
</ul>

最佳答案

将此添加到您的CSS中以使整个“框”可点击

ul li a {
  display: inline-block;
  height: 100%;
  width: 100%;
  color: white;
  text-decoration: none;
}

并更改它以使颜色正确

ul li a:hover, ul li a:active {
  background-color: white;
  color: black;
}

更新：根据您的要求，我进行了一些标记更改，以使其响应速度更快



片段演示

html, body {
  margin: 0;
  padding:0;
}
body {
  background:URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
  background-size: 100%;
  background-color:#3D5771;

}
.wrapper {
  padding-top: 10%;
}

h1 {
  color: white;
  font-family:Arial;
  font-size: 4.6vw;
  letter-spacing: 1px;
  text-align: center;
}

ul {
  word-spacing: .2em;
  letter-spacing: .2em;
  text-align: center;
  margin: 0;
  padding: 0;
}
ul li {
  font-family:Arial;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  display: inline-block;
  background-color: rgba(5,4,2,0.1);
  border: 2px solid white;
  color: white;
  font-size: 90%;
  width: 150px;
  height: 40px;
  margin: 30px;
}

ul li a:hover, ul li a:active {
  background-color: white;
  color: black;
}
ul li a {
  display: inline-block;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: white;
}

@media screen and (max-width: 700px) {

  .wrapper {
    padding-top: 5%;
  }

  ul li {
    margin: 10px;
  }

}

<div class="wrapper">
  <h1>A Girl With A Passion</h1>
  <ul>
    <li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
    <li><a href="www.youtube.com" class="prot"><strong>PORTFOLIO</strong></a></li>
    <li><a href="www.youtube.com" class="resume"><strong>RESUME</strong></a></li>
    <li><a href="www.youtube.com" class="me"><strong>ABOUT ME</strong></a></li>
  </ul>
</div>