Question

我尝试了a:hover和.nav > li > a:hover，但不会改变背景颜色。或者，我尝试了.nav a:hover，但在点击后立即生效，背景变为您在图像中看到的颜色。所以我也试过了.nav a:visited，但这并没有改变任何东西。

有什么想法吗？

HTML：

<!DOCTYPE html>
<html>
   <head>
      <link href="style.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="js/main.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
   <body>
      <div class = "supporting">
         <div class = "container-fluid">
            <div class="header">
               <h1 class = "logo"></h1>
               <ul class="nav nav-pills">
                  <li>
                     <a href="#">Projects</a>
                  </li>
                  <li>
                     <a href="#">Photography</a>
                  </li>
                  <li>
                     <a href="#">blog</a>
                  </li>
               </ul>
               <h1>i'm maria</h1>
            </div>
         </div>
      </div>
      <div class = "work">
         <div class = "container-fluid">
            <h1>work</h1>
         </div>
      </div>
      </div>
   </body>
</html>

CSS：

html, body {
  font-family:;
  margin:0 auto;
  text-transform: lowercase;
}

.nav {
  float: right;
  display: inline;
  margin:0 auto;
  list-style: none;
}

.nav li {
  list-style: none;
  display: inline;
  padding-top:0;
  padding-left: 10px;
}

.nav > li > a {
  padding: 10px;
  color: white;
}

.nav a:hover {
  background-color: transparent !important;
}
.header {
  width: 100%;
  display:inline-block;
  padding:10px;
  margin: 0 auto;
}
.header h1 {
  font-size: 50px;
  margin:0 auto;
  display:inline-block;
}

.header .nav {
  padding-left:10px;
}

.work h1 {
    border-left: 0px solid black;
    padding:10px;
    display:inline-block;
    left:50%;
    position: absolute;
    transform: translate(-50%, -50%);
    color:;
  }

.supporting h1 {
    top: 50%;
    left:50%;
    position:absolute;
    display:inline-block;
    margin:0 auto;
    transform: translate(-50%, -50%);
    color:white;

  }
.supporting .container-fluid {
  background-image: url("img/photo-top.jpg");
  height: 600px;
  background-size: cover;
  background-position: center center;
  text-align: center;
  position:relative;
  top: 0;

}

.work .container-fluid {
  height:500px;
  margin: 0 auto;
  background: white);
  width:100%;
  padding:0;
}

div.container-fluid {
  padding:0;
  width:100%;
  height: 100%;
}

Answer 1

示例：

＆＃13;

  html, body {
  font-family:;
  margin:0 auto;
  text-transform: lowercase;
}

.nav {
  float: right;
  display: inline;
  margin:0 auto;
  list-style: none;
}

.nav li {
  list-style: none;
  display: inline;
  padding-top:0;
  padding-left: 10px;
}

.nav > li > a {
  padding: 10px;
  color: white;
  background-color: skyblue;
}

.nav a:hover {
  background-color: transparent !important;
  color:black;
}
.header {
  width: 100%;
  display:inline-block;
  padding:10px;
  margin: 0 auto;
}
.header h1 {
  font-size: 50px;
  margin:0 auto;
  display:inline-block;
}

.header .nav {
  padding-left:10px;
}

.work h1 {
    border-left: 0px solid black;
    padding:10px;
    display:inline-block;
    left:50%;
    position: absolute;
    transform: translate(-50%, -50%);
    color:;
  }

.supporting h1 {
    top: 50%;
    left:50%;
    position:absolute;
    display:inline-block;
    margin:0 auto;
    transform: translate(-50%, -50%);
    color:white;

  }
.supporting .container-fluid {
  background-image: url("img/photo-top.jpg");
  height: 600px;
  background-size: cover;
  background-position: center center;
  text-align: center;
  position:relative;
  top: 0;

}

.work .container-fluid {
  height:500px;
  margin: 0 auto;
  background: white);
  width:100%;
  padding:0;
}

div.container-fluid {
  padding:0;
  width:100%;
  height: 100%;
}

＆＃13;

<div class = "supporting">
<div class = "container-fluid">
<div class="header">
<h1 class = "logo"></h1>
<ul class="nav nav-pills">
<li>
<a href="#">Projects</a>
</li>
<li>
<a href="#">Photography</a>
</li>
<li>
<a href="#">blog</a>
</li>
</ul>
<h1>i'm maria</h1>
 </div>
</div>
</div>

<div class = "work">
<div class = "container-fluid">
<h1>work</h1>
</div>
</div>

＆＃13;

Answer 2

试试这个

CSS

悬停

.nav li a:focus,
.nav li a:hover
{
background-color:red/*desired color*/
}

悬停在有效元素上

.nav li.active a,
.nav li.active a:hover,
.nav li.active a:focus
{
background-color:Red;/*desired color*/
}

如何更改a：悬停背景颜色？

2 个答案: