CSS如何实现超链接背景切换_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

CSS如何实现超链接背景切换_html/css_WEB-ITnose

Jun 24, 2016 am 11:39 AM

CSS如何实现超链接背景切换:

相当数量的网站在导航栏都有如此效果:当鼠标放在导航栏目上，背景图片会发生变化，移开之后又会还原原来的背景图片。下面简单介绍一下如何实现此效果。代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">div{  height:28px;  width:300px;  border-bottom:3px solid #E10001;}ul{  list-style:none;  margin:0px;  padding:0px;}ul li{  float:left;  width:87px;  height:28px;  margin-left:2px;  display:inline;}ul li a{  width:87px;  height:28px;  display:block;  font-size:14px;  text-align:center;  line-height:28px;  text-decoration:none;  color:#333;  background:url(mytest/demo/bg1.gif) no-repeat;}ul li a:hover{  background:url(mytest/demo/bg2.gif) no-repeat;}</style></head><body><div>  <ul>    <li><a href="#">CSS专区</a></li>    <li><a href="#">JS专区</a></li>    <li><a href="#">HTML专区</a></li>  </ul></div></body></html>

登入後複製

以上代码实现了我们的要求。实现的过程非常简单:

第一步，将超链接的默认状态下设置一个背景图片。

第二部，在鼠标放到超链接上的时候设置成另一张背景图片。

注意:a元素必需要转换成块级元素，否则无法设置高度和宽度。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0508/938.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4683

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn