如何仅在鼠标光标位于菜单上后才能激活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>

I want this "HOME" keep inactive just like "ABOUT" and "CONTACT US" if I didn't touch it by my cursor.

I want each one of them to be activated and turn to blue after my cursor goes exactly at the menu.

Please Help :)
Thank You.

Answer 1

There are three selectors for <a> tag:

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

You can make all of them same style and on hover a:hover make different style. try example on w3schools .

The :link selector is used to select unvisited links. The :visited selector is used to select visited links. A link becomes active when you click on it. The :hover selector is used to select elements when you mouse over them. And it's used not only for <a> tag.

take a look at jsfiddle .

Answer 2

Every class you need to use

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

for ex:

active a {

  }

active a:hover { } active a:visited { }