我的顶栏在悬停时不会改变颜色

时间:2017-01-17 13:23:43

标签: html css

我正在尝试创建我自己的网站,但我在顶栏上遇到一些困难并没有改变hovor的颜色。如果您认为可以提供帮助,请回答。

index.html工作正常,只是认为可能需要添加。

<!DOCTYPE html>
<html>
  <head>
    <title> my site </title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <header>
      <ul>
        <li> <a href="gradecalc/gradecalc.html" >Grade Calculator</a>
        <li> <a href="aboutme/aboutme.html" >About Me</a></li>
        <li> <a href="resume/resume.html" >Résumé</a></li>
      </ul>
    </header>
  </body>
</html>

index.css,仅用于标题。

header ul { /*selects list of stuff*/
  list-style-type: none; /*no bullet points*/
  margin: 0; 
  padding: 0;
  background-color: #70deef;
  position: fixed;
  width: 100%;
  height: 50px;
}
header li { /*selects list element*/
  float: left; /*move to left*/
}
header li a { 
  display: block; /*makes a rectangle*/
  color: #ffffff; /*white*/
  text-align: center;
  text-decoration: none;
  padding: 20px;
}
header li a.active { /*when hovering??*/
  background-color: #d6d6d6; /*grey*/

}

我认为header li a.active会改变悬停时的颜色。为什么不这样做?

2 个答案:

答案 0 :(得分:2)

尝试使用a:hover。不是a.active或类似的东西。

有关更多信息,请参阅CSS :hover SelectorCSS Pseudo-classes或更一般地CSS Selector Reference

header ul {
  /*selects list of stuff*/
  list-style-type: none;
  /*no bullet points*/
  margin: 0;
  padding: 0;
  background-color: #70deef;
  position: fixed;
  width: 100%;
  height: 50px;
}
header li {
  /*selects list element*/
  float: left;
  /*move to left*/
}
header li a {
  display: block;
  /*makes a rectangle*/
  color: #ffffff;
  /*white*/
  text-align: center;
  text-decoration: none;
  padding: 20px;
}
header li a:hover {
  /*when hovering??*/
  background-color: #d6d6d6;
  /*grey*/
}
<!DOCTYPE html>
<html>

<head>
  <title>my site</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
  <header>
    <ul>
      <li> <a href="gradecalc/gradecalc.html">Grade Calculator</a>
        <li> <a href="aboutme/aboutme.html">About Me</a>
        </li>
        <li> <a href="resume/resume.html">Résumé</a>
        </li>
    </ul>
  </header>
</body>

</html>

答案 1 :(得分:2)

您必须使用css选择器#include <string> // std::string #include <iostream> // std::cout #include <sstream> // std::stringstream using namespace std; int main () { stringstream ss; int n = 100; char* p; ss << n; string tmp = ss.str(); p = const_cast<char*>(tmp.c_str()); cout << "p: " << p << '\n'; return 0; }

:hover