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

最新推荐文章于 2021-06-27 13:34:24 发布

zhengbinglucky

最新推荐文章于 2021-06-27 13:34:24 发布

阅读量1.4w

点赞数

分类专栏： Ajax 文章标签： jquery function 浏览器 ie class 脚本

本文链接：https://blog.youkuaiyun.com/zhengbinglucky/article/details/7782877

版权

Ajax 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在项目中遇到的A标签样式调整需求，特别是如何处理下划线与文本间距的问题。通过移除text-decoration并添加mouseover事件来模拟下划线，但出现了虚边框影响美观。在mousedown后，边框甚至变为红色。为了解决这个问题，作者分享了两种解决方案：一是修改CSS样式，包括针对IE的hideFocus属性；二是直接在A标签内部添加onfocus事件以消除焦点的虚边框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

没办法，这个问题必须解决！

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

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

css样式如下：

a{
	cursor:pointer;
	text-decoration:none;
	hide-focus: expression(this.hideFocus=true);
	outline:none;
}
a:link,a:visited,a:hover,a:active{
	text-decoration:none;
}

a:focus{
	outline:0; 
}

.networkLink{
	border-bottom:ridge 1px #FFCC00;
	padding-bottom:1px;
	font-weight:300;
}

js脚本代码如下:

jQuery(document).ready(function(e) {
	
	var linkClass=".xjLink";
	
	var notLinkClass="xjNotLink";
	
	//jQuery("a").addClass(linkClass);
	
	jQuery(linkClass).css("text-decoration","none");
	
	jQuery(linkClass).css("padding-bottom","2px");
	
	jQuery(linkClass).addClass("ClickButton");
	
	var linkStyle="networkLink";
	
	//mouseover
	jQuery(linkClass).mouseover(function(){
		
		var thisClass=jQuery(this).attr("class");
		
		if(thisClass.indexOf(notLinkClass)<0){
			
			jQuery(this).addClass(linkStyle);
		}
	});
	
	//mouseout
	jQuery("."+linkClass).mouseout(function(){
		
		jQuery(this).removeClass(linkStyle);
		
	});
});

IE下可使用其私有的html属性：hideFoucs，在标签的结构中加入hidefocus="true"属性。

其他的加上
a:focus { outline: 0; }

第二种方式更简单：在标签的内部添加一个事件：οnfοcus="this.blur()"。