欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS技巧 >

div css鼠标悬停锚文本超链接文字背景颜色或图片变化

css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色)。

鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇。

DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式。利用以下代码:

a{...} 原始超链接默认样式设置
a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读:ie6 hover)

一、链接文字无背景鼠标经过悬停出现背景颜色   -   TOP

当鼠标经过无背景颜色背景图片的文字超链接时(悬停),超链接锚文本文字背景出现背景颜色。

用到CSS属性单词:
background+具体颜色值

我们通过实例实现鼠标经过a链接css背景颜色改变,我们对超链接a标签外加个div盒子css命名为".divcss5-abc"

1、完整实例HTML源代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>a背景颜色改变</title> 
  6. <style> 
  7. .divcss5-abc a{ color:#000}/* css注释说明:超链接颜色为黑色 */ 
  8. .divcss5-abc a:hover{ background:#00F; color:#FFF} 
  9. /* css 注释说明:鼠标经过悬停超链接时字体颜色为白色,背景为蓝色*/ 
  10. </style> 
  11. </head> 
  12.  
  13. <body> 
  14. <div class="divcss5-abc"> 
  15. 欢迎来到<a href="http://www.divcss5.com/">divcss5</a> 
  16. </div> 
  17. </body> 
  18. </html> 

2、背景颜色改变实例截图

鼠标经过背景颜色为蓝色字体为白色
鼠标经过背景颜色为蓝色字体为白色

以上通过对a标签设置鼠标经过时“a:hover”背景颜色出现为蓝色。

二、鼠标经过文字链接背景变为图片   -   TOP

当鼠标经过超链接的文字时,文字背景将图片作为背景。

我们通过实例实现鼠标经过a链接背景改变为图片,我们对超链接a标签外加个div盒子css命名为".divcss5-def"

1、完整HTML+css代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>a背景改变</title> 
  6. <style> 
  7. .divcss5-def a{ color:#000; padding:10px 10px; line-height:30px}/* css注释说明:超链接颜色为黑色 */ 
  8. .divcss5-def a:hover{color:#FFF; background:url(bj.gif) no-repeat center} 
  9. /* css 注释说明:鼠标经过悬停超链接时字体颜色为白色,背景为图片*/ 
  10. </style> 
  11. </head> 
  12.  
  13. <body> 
  14. <div class="divcss5-def"> 
  15. 欢迎来到<a href="http://www.divcss5.com/">divcss5</a> 
  16. </div> 
  17. </body> 
  18. </html> 

2、文字链接鼠标经过背景改变为图片实例截图

鼠标经过悬停在超链接文字上时背景变为图片
鼠标经过悬停在超链接文字上时背景出现图片效果截图

三、以上两个实例演示与打包下载   -   TOP

1、在线演示:查看案例

2、DIV+CSS源文件+图片素材打包下载:

以上两种情况的超链接文字鼠标悬停经过时候使用CSS+DIV实现超链接背景改变,可改变为背景颜色或背景图片美化效果,简单地说是对a:hover设置样式实现我们需要的美化布局。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/jiqiao/j620.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-09-17 14:29 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。