J'essaie d'essayer de créer mon propre site Web, mais j'ai du mal à ce que ma barre supérieure ne change pas de couleur sur hovor. Si vous pensez pouvoir aider, veuillez répondre.

index.html fonctionne parfaitement, je pensais juste qu'il pourrait avoir besoin d'être ajouté.

<!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, trucs uniquement pour l'en-tête.

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*/

}

Je pensais que header li a.active changerait la couleur en survol. Pourquoi ne le fait-il pas?

-1
lol 17 janv. 2017 à 16:23

2 réponses

Meilleure réponse

Essayez d'utiliser a:hover. Pas a.active ou quelque chose comme ça.

Pour plus d'informations, voir CSS: hover Selector, Pseudo-classes CSS ou plus généralement Référence du sélecteur 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: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>
2
Patrick Mlr 17 janv. 2017 à 13:31

Vous devez utiliser le sélecteur css :hover

 header li a:hover { /*when hovering??*/
  background-color: #d6d6d6; /*grey*/
}
2
Carlos Rivero 17 janv. 2017 à 13:26