CSS: псевдокласс hover не работает в моем коде

Question

Я использовал псевдокласс hover для изменения цвета элемента привязки <a>, но его результат не такой, как я хочу. Это не работает . Помоги мне, пожалуйста. Большое спасибо. JSFiddle здесь - http://jsfiddle.net/km9287u3/6/

Answer 1

У вас проблема специфичность . div#nav a больше sepcifi c, чем a:hover. Сделайте ваше правило наведения более конкретным c, как показано ниже.

div#nav a {
  margin-left: 30px;
  font-size: 1.2em;
  font-weight: 600;
  font-family: sans-serif;
  color: #444;
  text-decoration: none;
}

div#nav a:hover {
  color: brown;
}

<header>
  <div id="logo">

  </div>
  <div id="nav" class="navigation">
    <a id="home" href="Ajax_Load_Content_to_Page.html">HOME</a>
    <a id="route" href="Ajax2.html">ROUTE</a>
    <a id="toys" href="Ajax3.html">TOYS</a>
  </div>
</header>