Heim >Web-Frontend >HTML-Tutorial >CSS如何实现超链接背景切换_html/css_WEB-ITnose
CSS如何实现超链接背景切换_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:041843Durchsuche
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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：::before和::after伪元素的用法_html/css_WEB-ITnoseNächster Artikel：使用CSS创建有图标的网站导航菜单_html/css_WEB-ITnose