如何僅在鼠標光標位於菜單上后才能激活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選擇器用於將元素:hover在元素上時選擇它們。 而且它不僅用於<a>標記。

看看jsfiddle 。

Answer 2

您需要使用的每個課程

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

例如：

活躍{

  }

活動a：懸停{}活動a：訪問{}