link_to 和 :hover 在我的 Rails 应用程序上不起作用

Posted 2023-02-15

【中文标题】link_to 和 :hover 在我的 Rails 应用程序上不起作用

【英文标题】：link_to and :hover not working on my rails app

【发布时间】：2021-11-15 16:14:17

【问题描述】：

这是我的按钮

<%= link_to "Contact Me", contact_path, class: "btn btn-flat" %>

这是我的 CSS

.btn-flat 
  color: white;
  padding: 8px 24px;
  border-radius: 4px;
  background: #1EDD88;
  transition: background 0.3s ease;


.btn-flat:hover 
  background: red;
  color: white;

该确切路径在我的导航栏中有效，因此不确定为什么它在这里不起作用。 :after 之类的效果也不起作用。除了“btn”之外，我还使用了其他类，因此它与引导程序覆盖任何内容无关。

【问题讨论】：

尝试将background 更改为background-color - 属性和transition 内？我不确定background 是否是可转移的。另外，请检查开发人员工具中 .btn-flat 和 .btn-flat:hover 没有来自引导程序的 !Important 属性

那也没用。考虑到 link_to 也不起作用，我担心这不仅仅是一个简单的 CSS 问题。我只是不知道是什么导致两者都无法正常工作。

好吧，一旦我的页面折叠到一定大小，按钮就会起作用。一旦我的导航栏消失，按钮就会起作用。

【参考方案1】：

您使用的类是引导类，这就是它不起作用的原因。 使用你自己的类，比如

<%= link_to "Contact Me", contact_path, class: "btncontact btn btn-flat" %>

【讨论】：

我尝试删除引导类，但它仍然无法正常工作。我尝试在页面上添加其他 link_to，但它们也不起作用。

你把css放在哪个文件里

好吧，一旦我的页面折叠到一定大小，按钮就会起作用。一旦我的导航栏消失，按钮就会起作用。

让我们连接到任何平台，这样我就可以查看代码到底发生了什么。

跟bootstrap有关。 navbar-collapse 类正在搞乱其他事情。不过谢谢你的提议！