a标签超链接点击后无虚边框,完美自定义超链接签样式

最近在做项目的时候,为了改变A标签的固有样式,老板要求标签的下划线【text-decoration】与文本之间的距离应该增加1px。由于知识简陋,没找到好的方法,于是我就想到了笨方法:把text-decoration设置为none,然后给标签注册了一个mouseover事件,当鼠标移动到上面时,给标签bottom-border添加样式。按照这种思路,效果出来了,但是有一个缺陷是,标签出现了虚边框,在一定程度上影响了美观,之前也遇到过,当时没解决,本想这次也就这样,浏览器默认的设置,我也改变不了。但是,更邪意的事情出现了,在mousedown标签后,标签的虚边框的底边框变成了红色,这个可是大问题,否则老板和客户都会骂我,那就不划算了!

没办法,这个问题必须解决!

于是就开始【百度一下】,找到了好几种方法,总结如下,以便和你分享:

第一种方式:修改样式,我使用如下样式,在IE和FF下显示正常。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值