从超链接删除下划线 - Rails

时间:2013-01-14 21:45:25

标签: html css

我一直在寻找和寻找,我似乎无法改变这个非常烦人的事情! 所以请温柔天使的人,帮我删除链接下划线,但具体的。 严重搞砸了,谢谢。

一些代码:

    <div id = "cracker-container">

      <div class = "cracker-wrapper">
      <div id = "cracker1-button">
        <%= link_to "cracker", new_crack_path %>
      </div>
      </div>

      <div class = "cracker-wrapper">
    <div id = "cracker2-button">
        Cracker2
    </div>
     </div>

    <div class = "cracker-wrapper">
     <div id = "cracker3-button">
      Cracker3
    </div>
    </div>

    </div>

THE CSS:

#cracker1{
  color: #000;
}

#cracker2{
  color: #000;
}

#cracker3{
  color: #000;
}

#cracker1:active{
  color: #fff;
}

#cracker2:active{
  color: #fff;
}

#cracker3:active{
  color: #fff;
}

2 个答案:

答案 0 :(得分:5)

这将从#cracker1-button div下的任何标签中删除文本修饰。

#cracker1-button a:link { 
    text-decoration:none; 
}

但是,该代码只会删除“新鲜”/未访问过的链接中的下划线。链接有4种不同的状态:

  • 链接:新鲜/未访问过的链接
  • 访问:用户访问过的链接
  • 悬停:当用户将鼠标悬停在鼠标链接
  • 上时
  • 活动:当链接是页面上的活动元素(具有键盘焦点)时

如果要从所有4种状态的链接中删除下划线,则需要在CSS中指定它:

#cracker1-button a:link, #cracker1-button a:visited, #cracker1-button a:hover, #cracker1-button a:active,  { 
    text-decoration:none; 
}

以下是有关使用CSS设置样式链接的更多信息的参考。

http://www.w3schools.com/css/css_link.asp

答案 1 :(得分:0)

#cracker1-button a { text-decoration:none; }

不知道这是不是你所追求的,但这将删除#cracker1中链接的下划线。