Today, on the Internet, I found the site http://studioantwork.com/, where the menu bar when the mouse hover when the transparency will be reduced, in general, we will use jquery to achieve this transition effect, but here the designers used a different method, It's a novelty for ignorant.
The following is the author's source code
/* fade */
#title {
padding:0px 0px 0px 0px;
Float:left;
opacity:1;
-webkit-transition:opacity 0.3s;
-moz-transition:opacity 0.3s;
-webkit-animation-timing-function:ease-out;
-moz-animation-timing-function:ease-out;
}
#title: hover {
opacity:0.5;
}
There are some new things to learn, you will encounter a lot of problems need to be recorded
I have a menu
<nav>
<ul id= "Main-nav" >
<li><a href= "http://www.w3school.com.cn" >home</a ></li>
<li><a href= "#" >a</a></li>
<li><a href= "#" >b</a ></li>
<li><a href= "#" >c</a></li>
</ul>
</nav>
How to implement this function.
Nav ul Li a
{
opacity:1;
Color: #000000;
Text-transform:uppercase;
Text-decoration:none;
-webkit-transition:opacity 0.35s ease-out;
-moz-transition:opacity 0.35s ease-out;
-o-transition:opacity 0.35s ease-out;
}
Nav ul li a:hover
{
opacity:0.5;
}
It seems to be OK, but it's not possible to run a discovery.
As a hard-pressed GIS engineer, for the CSS God Horse is really enough to understand, so decisively on the w3school to find help.
According to W3school in the CSS pseudo-class, in the CSS definition, a:hover must be placed after A:link and a:visited, is valid.
See http://www.w3school.com.cn/css/css_pseudo_classes.asp
So why Studioantwork in the writing is OK? I do not know a variety of reasons, I hope to have a friend to help out. But it doesn't prevent me from imitating, so I have the following code
#main-nav a{
opacity:1;
-webkit-transition:opacity 0.3s;
-moz-transition:opacity 0.3s;
-webkit-animation-timing-function:ease-out;
-moz-animation-timing-function:ease-out;
}
#main-nav a:hover{
opacity:0.5;}
After testing, this will be OK.
In addition, through Google, found the http://www.189works.com/article-78327-1.html, here through the a:link,a:visited,a:hover to achieve this effect of the introduction.