简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > HTML Tutorial > body text

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

WBOY
Release： 2016-06-24 11:39:04
Original
1730 people have browsed it

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

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

 

 

蚂蚁部落
Copy after login

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

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

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

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

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

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

Related labels：
CSS如何实现超链接背景切换
source：php.cn
Previous article：::before和::after伪元素的用法_html/css_WEB-ITnose Next article：使用CSS创建有图标的网站导航菜单_html/css_WEB-ITnose
Statement of this Website
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
Latest Articles by Author
Latest Issues
PHP implements links and background image settings between pages I need help linking two web pages together in php, I want my users to click a button and j...
From 2023-09-14 22:34:32
0
1
224
How to change background color (green/red) in empty HTML on certain keys? Does anyone have a solution on how to change the background color in HTML when certain but...
From 2023-09-07 10:08:19
0
2
274
objective-c - IOS编程，如何实现navibationBar的整体移动？ navigationBar在切换viewController的时候，背景默认是不动的，只是按钮有一个特效。 如果想实现整个背景和新的按钮整体从右侧动画进入，如何实现？ 目前看来，如...
From 2017-04-21 11:16:55
0
1
490
前端 - 移动端iphone按下a链接背景颜色会变灰，如何解决？ 在iphone下测试发现按下a链接背景会变灰一下（尤其给a取消跳转事件时很明显），用css方式如何解决呢？
From 2017-04-17 11:41:33
0
4
365
javascript - 原生 JS如何实现类似Jquery的siblings功能？ 如题：比如我body里面有这么几个链接： {代码...} {代码...} 现在能实现单击其中一个链接改变它的背景色，但是如何能实现JQ中很容易实现的功能，点击其中一个，其它的样式也...
From 2017-04-11 12:51:34
0
5
364
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！