Mouse sliding image link_navigation menu implemented by CSS pseudo-class-JS Tutorial-php.cn

Mouse sliding image link_navigation menu implemented by CSS pseudo-class

WBOY

Release： 2016-05-16 18:43:42

Original

1506 people have browsed it

Mouse sliding image link_navigation menu implemented by CSS pseudo-class

The following code uses the above image, please save it.

#Nav ul { 
margin:0; 
padding:0; 
list-style-type:none; 
}

#Nav li { 
float:left; 
margin:0; 
width:130px; 
height:33px; 
margin-left:5px; 
padding:0; 
}

#Nav a { 
display:block; 
width:130px; 
height:33px; 
line-height:33px; 
}

#Nav a.Dict:link,#Nav a.Dict:visited { 
text-decoration:none; 
background:url(http://files.jb51.net/demoimg/200910/nav.gif) left top no-repeat; 
}

#Nav a.Dict:hover,#Nav a.Dict:active { 
text-decoration:none; 
font-weight:bold; 
background:url(http://files.jb51.net/demoimg/200910/nav.gif) left -33px no-repeat; 
}

#Nav a.MediaPlay:link,#Nav a.MediaPlay:visited { 
text-decoration:none; 
background:url(http://files.jb51.net/demoimg/200910/nav.gif) left -66px no-repeat; 
}

#Nav a.MediaPlay:hover,#Nav a.MediaPlay:active { 
text-decoration:none; 
font-weight:bold; 
background:url(http://files.jb51.net/demoimg/200910/nav.gif) left -99px no-repeat; 
}

#Nav a.RealPlay:link,#Nav a.RealPlay:visited { 
text-decoration:none; 
background:url(http://files.jb51.net/demoimg/200910/nav.gif) left -132px no-repeat; 
}

#Nav a.RealPlay:hover,#Nav a.RealPlay:active { 
text-decoration:none; 
font-weight:bold; 
background:url(http://files.jb51.net/demoimg/200910/nav.gif) left -165px no-repeat; 
} 
</style>

<center>
<div id="Nav">
    <ul>
        <li><a class="Dict" href="#">PowerWord</a></li>
        <li><a class="MediaPlay" href="#">MediaPlay</a></li>
        <li><a class="RealPlay" href="#">RealPlay</a></li>
        <li><a class="CodeFans" href="#">MediaPlay</a></li>
        <li><a class="RealPlay" href="#">RealPlay</a></li>
    </ul>
</div>
</center>