Maison >interface Web >tutoriel HTML >CSS如何实现超链接背景切换_html/css_WEB-ITnose
CSS如何实现超链接背景切换_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:39:041842parcourir
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
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：::before和::after伪元素的用法_html/css_WEB-ITnoseArticle suivant：使用CSS创建有图标的网站导航菜单_html/css_WEB-ITnose