css - 如何仅在鼠标光标位于菜单后才激活 CSS 菜单栏。

Question

<div id='cssmenu'>
 <ul>
    <li class='active '><a href='index.html'><span>Home</span></a></li>

   <li><a href='#'><span>About</span></a></li>
      <li class='has-sub '><a href='#'><span>Contact Us</span></a>
      <ul>
         <li><a href='#'><span>Contact 1</span></a></li>
         <li><a href='#'><span>Contact 2</span></a></li>
      </ul>
   </li>
</ul>
</div>

我希望它保持不活动状态，"HOME"就像我没有用光标触摸它一样。"ABOUT""CONTACT US"

我希望它们中的每一个都被激活并在我的光标完全位于菜单上后变为蓝色。

请帮助:)
谢谢。

Answer 1

<a>标签有三个选择器：

a:link    {}
a:visited {}
a:active  {}

您可以使它们都具有相同的样式，并在悬停时a:hover使它们具有不同的样式。在 w3schools 上尝试示例。

选择:link器用于选择未访问的链接。选择:visited器用于选择访问的链接。active当你点击它时，它会变成一个链接。当:hover您将鼠标悬停在元素上时，选择器用于选择元素。它不仅用于<a>标签。

看看jsfiddle。

Answer 2

您需要使用的每个类

a {
   //any styles
     color:gray;
  }
a:hover
  {
   //any styles
     color:blue;
  }
a:visited
  {
   //any styles
  }

例如：

活跃一个{

  }

活跃 a:hover { } 活跃 a:visited { }