Question

我有一些像这样的代码：

nav {
  margin: 0;
  font-family: 'PT Sans Narrow', cursive;
  position: fixed;
  top: 0px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid rgb(60, 60, 60);
  box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 10px 2px rgba(230, 200, 10, 0.8);
}
nav ul {
  float: right;
  padding: 0;
  margin-top: 0px;
  margin-bottom: 0px;
  margin: 0 15px;
}
nav ul li {
  display: inline-block;
  padding: 5px 5px 5px 0;
  margin: 0 5px;
}
nav a:link {
  text-decoration: none;
  color: white;
}
nav a:visited {
  text-decoration: none;
  color: white;
}
nav a#about:hover {
  text-decoration: none;
  /*    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;*/
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 10px 2px rgba(218, 29, 94, 0.8);
  -webkit-transition: box-shadow 1s ease-out;
  -moz-transition: box-shadow .5s ease-out;
  -o-transition: box-shadow .5s ease-out;
  transition: box-shadow .5s ease-out;
}
nav a#portfolio:hover {
  text-decoration: none;
  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 10px 2px rgba(50, 250, 5, 0.8);
  -webkit-transition: box-shadow 1s ease-out;
  -moz-transition: box-shadow .5s ease-out;
  -o-transition: box-shadow .5s ease-out;
  transition: box-shadow .5s ease-out;
}
nav a#portfolio:hover #colorChange {
  box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 10px 2px rgba(50, 250, 5, 0.8);
}
nav a#contact:hover {
  text-decoration: none;
  /*    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;*/
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 10px 2px rgba(5, 160, 250, 0.8);
  -webkit-transition: box-shadow 1s ease-out;
  -moz-transition: box-shadow .5s ease-out;
  -o-transition: box-shadow .5s ease-out;
  transition: box-shadow .5s ease-out;
}
nav a:active {
  text-decoration: none;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>
    Test
  </title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|Bangers' rel='stylesheet' type='text/css'>
</head>

<body>
  <header>
    <div class="image">
      <nav>
        <ul class="clearfix">
          <a href="#" id="about">
            <li>ABOUT</li>
          </a>
          <a href="#" id="portfolio">
            <li>PORTFOLIO</li>
          </a>
          <a href="#" id="contact">
            <li>CONTACT</li>
          </a>
        </ul>
      </nav>
    </div>
    <div class="content"></div>
  </header>
  <footer>

  </footer>
</body>

</html>

当我按下像“关于”这样的按钮时，导航边框阴影应该从黄色变为洋红色。我尝试了几件事，但没有任何工作。

也许你可以帮助我。

提前致谢！

在悬停子元素时需要帮助来更改父元素

0 个答案: