首页 > 网站 > WEB开发 > 正文

用CSS来实现鼠标翻转的特效代码

2024-04-27 13:57:09
字体:
来源:转载
供稿:网友

<!-- 把下列代码加入到head区内 -->
需要两个图片:menu.jpg,menuover.jpg

<style>

.menulist a{

color: black;
display: block;
width: 170px;
height: 20px;
padding-left: 5px;
padding-top: 1px;
margin-bottom: 5px;
background-image: url(/js/menu.jpg);
background-repeat: no-repeat;
background-position: left top;
text-decoration: none;
font-weight: bold;
}

.menulist a:hover{
background-image: url(/js/menuover.jpg);
}

</style>


<!-- 把下列代码加入到body区内 -->
<div class="menulist">
<a href="http://www.vevb.com">Home</a>
<a href="http://www.vevb.com/">Submit</a> <a href="http://www.vevb.com/">Resources</a> <a href="http://www.vevb.com/">Contact</a>
</div>

<br/><br/><br/><br/><br/><br/><br/>
两个图片供大家下载使用
<img src=/js/menu.jpg>
<img src=/js/menuover.jpg>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表