Home >Web Front-end >JS Tutorial >Mouse sliding image link_navigation menu implemented by CSS pseudo-class

Mouse sliding image link_navigation menu implemented by CSS pseudo-class

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 18:43:421610browse

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：You can take a look at the Js calendar used by Baidu_time and dateNext article：You can take a look at the Js calendar used by Baidu_time and date

See more

Mouse sliding image link_navigation menu implemented by CSS pseudo-class

Related articles