css a超链接下划线设置装备摆设必要色采,鼠标悬停超链接翰墨字体上时下划线颜色窜改,字体色调波动
下划线样式:
text-decoration:underline
下划线text-decoration能设置装备摆设字体下划线格式,但不克不及完成字体色调和下划线色调差距。这里就会垄断下边框border-bottom格式来完成,下边框可能篡改粗细,能够旋转边框颜色。
实例DIV CSS代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>超链接字体下划线扭转 CSS5</title> <style> .db a{text-decoration:none;border-bottom:1px solid #F00} .db a:hover{ border-bottom:1px solid #F0F} </style> </head> <body> <div class="db"> 接待会晤<a href="//www.css5.com.cn/">CSS5</a> </div> </body> </html>
告白:
.db a{text-decoration:none;border-bottom:1px solid #F00}
这里对class=db盒子内超链接字体去掉下划线格局,同时配置超链接字体默认有下划线并且颜色为血色。
.db a:hover{ border-bottom:1px solid #F0F}
设置装备摆设class=db对象内超链接字体形式,但鼠标悬停时,下边框颜色旋转为紫色。
效果截图:
CSS下边框实现超链接字体下划线色采扭转
以上实例总结:
尽管超链接可以或许配置下划线text-decoration花色,但是不克不及实现轻车熟路颜色扭转,这里哄骗下边框border-bottom款式仿照出下划线成果,同时把持边框兴许改变颜色设置装备摆设色彩格式本性,实现了超链接a锚文本字体下划线色彩扭转。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-tool/t52645.shtml