首页 > 代码库 > 解决使用字体图标时a链接的下划线问题

解决使用字体图标时a链接的下划线问题

  想必大家都知道a超链接锚文本自带下划线样式,为了使页面看着美观,我们会对其做一个处理,让 其下滑线去除。

  对于a链接的下划线去除的方法,我们会在css中将text-decoration的值设置为“none”即可。

  可当我们的页面加入字体图标时, a链接移入还会出现下划线:

  1 <!DOCTYPE html>
  2 <html ng-app="mk">
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>闫瑾--首页</title>
  6     <link rel="stylesheet" href=http://www.mamicode.com/"../style/libs/Font/demo-files/demo.css"/>
  7     <link rel="stylesheet" href=http://www.mamicode.com/"../style/index.css"/>
  8     <script src=http://www.mamicode.com/"../Js/libs/angular.js"></script>
  9     <script src=http://www.mamicode.com/"../Js/libs/angular-route.min.js"></script>
 10     <script src=http://www.mamicode.com/"../Js/index.js"></script>
 11 </head>
 12 <body ng-controller="test">
 13 
 14 <!--导航开始-->
 15 <nav>
 16     <div id="nav">
 17         <!--导航左部-->
 18         <ul class="Y_navLeft">
 19             <li><a style="color: #ff9a02;
 20      " href=http://www.mamicode.com/"https://www.genshuixue.com/static/login?next=http%3A%2F%2Fwww.genshuixue.com%2Fbj%2F">
 21                 <i class="icon icon-user"></i>
 22                 请登录
 23             </a></li>
 24             <li>
 25                 <a href=http://www.mamicode.com/"https://www.genshuixue.com/static/register">免费注册</a>
 26             </li>
 27             <li><a href=http://www.mamicode.com/"http://www.genshuixue.com/static/app">
 28                 <i class="icon icon-mobile" style="color: #ff9a02;
 29      "></i>
 30                 手机跟谁学
 31             </a></li>
 32             <li><a href=http://www.mamicode.com/"http://www.genshuixue.com/static/liveclient">
 33                 <i class="icon icon-film" style="color: #ff9a02;
 34      "></i>
 35                 直播助手
 36             </a></li>
 37             <li id="Y_Wx">
 38                 <i class="icon icon-bubbles"></i>
 39                 关注领好课
 40                 <div class="Y_navWeixin">
 41                     <div style="height: 20px;color: #ff9b04">跟谁学学生版:</div>
 42                     <div style="color: #ff9b04">genshuixue_student</div>
 43                     <div class="Y_Wx"></div>
 44                     <div>精品好课等你领</div>
 45                 </div>
 46             </li>
 47         </ul>
 48         <!--导航右部-->
 49         <ul class="Y_navRight">
 50             <li>
 51                 <a href=http://www.mamicode.com/"http://www.genshuixue.com/bj/" style="color: #ff9a02;
 52      ">跟谁学首页</a>
 53             </li>
 54             <li id="Y_Timetable">
 55                 <a href=http://www.mamicode.com/"https://www.genshuixue.com/static/login?next=/dynamic/center">我的跟谁学</a>
 56                 <span>v</span>
 57 
 58                 <div class="Timetable">
 59                     <div>我的课表</div>
 60                     <div>我的订单</div>
 61                     <div>钱包管理</div>
 62                     <div style="width: 105px;height: 30px;background: #ff9a02;color: #ffffff;text-indent: 0.5em">
 63                         进入我的跟谁学
 64                     </div>
 65                 </div>
 66             </li>
 67             <li id="Y_Timetable1">
 68                 <a href=http://www.mamicode.com/"https://www.genshuixue.com/static/login?next=/dynamic/center">
 69                     <i class="icon icon-calendar"></i>我的课表</a>
 70                 <span>v</span>
 71 
 72                 <div class="Timetable1">
 73                     <div style="height: 35px;line-height: 35px;text-align: center;border-bottom: 1px solid #c2ccd1">
 74                         进入个人中心查看我的课表
 75                     </div>
 76                     <div><a href=http://www.mamicode.com/"#" style="display: inline-block;width: 0">
 77                         <button style="width: 155px;height: 30px;background: #ff9a02;color: #ffffff;text-indent: 0.5em;border: none;margin: 9px 12px;font-size: 0.15rem">
 78                             查看我的课表
 79                         </button>
 80                     </a></div>
 81                 </div>
 82             </li>
 83 
 84             <li>
 85                 | &nbsp;
 86                 <a href=http://www.mamicode.com/"https://www.genshuixue.com/static/register">老师登录</a>
 87             </li>
 88             <li>
 89                 | &nbsp;
 90                 <a href=http://www.mamicode.com/"https://www.genshuixue.com/static/register">机制平台</a>
 91             </li>
 92             <li id="Y_Timetable2">
 93                 | &nbsp;
 94                 <a href=http://www.mamicode.com/"https://www.genshuixue.com/static/register">客户服务</a>
 95                 <span>v</span>
 96 
 97                 <div class="Timetable2">
 98                     <div>在线客服</div>
 99                     <div>客服电话</div>
100                     <div>帮助中心</div>
101                     <div>意见反馈</div>
102                 </div>
103             </li>
104         </ul>
105     </div>
106 </nav>
107 </body>
108 </html>

  以下是index.css的内容

  1 nav {
  2   z-index: 999;
  3   width: 100%;
  4   height: 30px;
  5   background: #f4f4f4; }
  6   nav #nav {
  7     width: 1120px;
  8     height: 30px;
  9     line-height: 30px;
 10     margin: 0 auto;
 11     display: flex; }
 12     nav #nav ul {
 13       flex-grow: 1; }
 14     nav #nav .active {
 15       color: #ff9a02;
 16       background: coral; }
 17     nav #nav .Y_navLeft {
 18       font-size: 0.15rem;
 19       width: 500px;
 20       height: 30px; }
 21       nav #nav .Y_navLeft li {
 22         z-index: 999;
 23         list-style: none;
 24         float: left;
 25         margin-left: 22px;
 26         color: #6e6e6e; }
 27         nav #nav .Y_navLeft li .Y_navWeixin {
 28           width: 150px;
 29           position: relative;
 30           z-index: 999;
 31           height: 0;
 32           overflow: hidden;
 33           transition: height 0.2s ease 0s;
 34           margin-left: -20px;
 35           text-align: center;
 36           background: white; }
 37           nav #nav .Y_navLeft li .Y_navWeixin .Y_Wx {
 38             width: 115px;
 39             height: 115px;
 40             background: url("http://cdn.gsxservice.com/asset/img/wechat_qrcode_2c3db6ab6c.png");
 41             margin: 0 auto; }
 42         nav #nav .Y_navLeft li a {
 43           color: #6e6e6e;
 44           text-decoration: none; }
 45         nav #nav .Y_navLeft li a:hover {
 46           color: #ff9a02; }
 47       nav #nav .Y_navLeft #Y_Wx:hover .Y_navWeixin {
 48         background: white;
 49         height: 210px;
 50         border: 1px solid #eeeeee; }
 51       nav #nav .Y_navLeft #Y_Wx:hover .icon-film {
 52         background: red; }
 53     nav #nav .Y_navRight {
 54       height: 30px;
 55       font-size: 0.15rem; }
 56       nav #nav .Y_navRight li {
 57         margin-left: 5px; }
 58       nav #nav .Y_navRight #Y_Timetable .Timetable {
 59         width: 135px;
 60         height: 0;
 61         transition: height 0.1s ease 0s;
 62         margin-left: -10px;
 63         margin-top: -1px;
 64         background: white;
 65         overflow: hidden;
 66         border: 1px solid #f4f4f4;
 67         position: absolute; }
 68         nav #nav .Y_navRight #Y_Timetable .Timetable div {
 69           width: 105px;
 70           margin: 0 auto; }
 71         nav #nav .Y_navRight #Y_Timetable .Timetable div:hover {
 72           cursor: pointer;
 73           color: #ff9b04; }
 74       nav #nav .Y_navRight #Y_Timetable:hover .Timetable {
 75         z-index: 999;
 76         height: 130px; }
 77       nav #nav .Y_navRight #Y_Timetable1 .Timetable1 {
 78         width: 185px;
 79         height: 0;
 80         transition: height 0.1s ease 0s;
 81         margin-left: -10px;
 82         margin-top: -1px;
 83         background: white;
 84         overflow: hidden;
 85         border: 1px solid #f4f4f4;
 86         position: absolute; }
 87         nav #nav .Y_navRight #Y_Timetable1 .Timetable1 div:hover {
 88           cursor: pointer;
 89           color: #ff9b04; }
 90       nav #nav .Y_navRight #Y_Timetable1:hover .Timetable1 {
 91         z-index: 999;
 92         height: 90px; }
 93       nav #nav .Y_navRight #Y_Timetable2 .Timetable2 {
 94         width: 90px;
 95         height: 0;
 96         transition: height 0.1s ease 0s;
 97         margin-top: -1px;
 98         background: white;
 99         overflow: hidden;
100         border: 1px solid #f4f4f4;
101         position: absolute;
102         text-align: center; }
103         nav #nav .Y_navRight #Y_Timetable2 .Timetable2 div:hover {
104           cursor: pointer;
105           color: #ff9b04; }
106       nav #nav .Y_navRight #Y_Timetable2:hover .Timetable2 {
107         height: 130px; }
108       nav #nav .Y_navRight li {
109         width: 80px;
110         list-style: none;
111         float: left;
112         margin-left: 10px;
113         color: #6e6e6e; }
114         nav #nav .Y_navRight li a {
115           font-size: 0.15rem;
116           color: #6e6e6e;
117           text-decoration: none; }
118         nav #nav .Y_navRight li a:hover {
119           color: #ff9a02; }

解决方法:

我们需要改  <link rel="stylesheet" href="http://www.mamicode.com/style/libs/Font/demo-files/demo.css"/>这个css的样式:

在demo.css中找到它并将其隐藏即可:

a:hover, a:focus {
   box-shadow: 0 1px #e74c3c;
}

你们自己动手试一试吧!

解决使用字体图标时a链接的下划线问题