1. 程式人生 > >a標籤超連結點選後無虛邊框,完美自定義超連結籤樣式

a標籤超連結點選後無虛邊框,完美自定義超連結籤樣式

最近在做專案的時候,為了改變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; }

第二種方式更簡單:在標籤的內部新增一個事件:onfocus="this.blur()"。