a標籤超連結點選後無虛邊框,完美自定義超連結籤樣式
阿新 • • 發佈:2019-01-23
最近在做專案的時候,為了改變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()"。