如何更改导航栏链接悬停和活动状态

Question

我正在尝试使导航栏链接在悬停和单击时变为斜体。

这是我的导航栏 html - 我应该添加什么 css？

<ul>
  <li class="nav-work"><a href="/">Work</a></li>
  <li class="nav-about"><a href="/about.html">About</a></li>
  <li class="nav-contact"><a href="/contact.html">Contact</a></li>
</ul>

Answer 1

你需要使用伪类:hover，:active

a:hover,
a:active {
  font-style: italic;
}

<ul>
  <li class="nav-about"><a href="/about.html">About</a></li>
  <li class="nav-contact"><a href="/contact.html">Contact</a></li>
</ul>

Answer 2

你可以这样做，

 #nav li a:hover {
    color: yellow;
    font-style: italic;
}

#nav li a:active {
    color: blue;
    font-style: italic;
}

Answer 3

你可以这样做：

a:hover, a:active { 
    font-style: italic;
}