html - 从超链接中删除下划线 - Rails

标签 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;
}

最佳答案

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

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

但是,该代码只会从"new"/未访问过的链接中删除下划线。一个链接有 4 种不同的状态:

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

如果您想在所有 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

关于html - 从超链接中删除下划线 - Rails,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14327306/

相关文章:

html - CSS将两个div排列在一起

javascript - 如何使用 facebook javascript api 发布自定义帖子

css - 文本开始溢出时如何使用动态替换文本?

css - 自动将 md-tab 调整到 Angular2 Materials 中的屏幕或容器宽度

javascript - 卡片背景上的响应式磨砂玻璃效果

HTML 相对字体太大

html - 如何沿容器顶部和底部的水平线对齐 div

javascript - 计算平均值并在两个文本框中显示不同的结果

javascript - 使用 Css 和 jQuery 在悬停时更改文本

html - 背面有更多文字的翻转卡片