Question

我试图让我的3个链接在悬停时改变颜色是我拥有的css

<h2>Invoice <%= @invoice.number %></h2>

<table class="table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>

      <th></th>
    </tr>
  </thead>
  <tbody>
<%= for line_item <- @invoice.line_items do %>
    <tr>
      <td><%= line_item.product.name %></td>
      <td><%= line_item.quantity %></td>
    </tr>
<% end %>
  </tbody>
</table>

a {
  color: #5c8a36;
}

a:hover {
  text-decoration: none;
  color: #5c8a36;
}

.home_links:hover,
.home_links:focus {
  color: #5c8a36;
}

出于某种原因，使用此设置时，链接在悬停时不会更改。我不知道该怎么做才能让它发挥作用。任何建议都表示赞赏。

编辑：我希望这些特定链接显示为白色，然后悬停更改颜色与其他链接相同。

Answer 1

使用!imporant标记覆盖内联样式，如下所示：

a.home_links:hover{
    color:#57a22b !important;
}

或者删除内联样式并将其添加到您的css中：

a.home_links {
  color: white;
}

a.home_links:hover {
  text-decoration: none;
  color: #5c8a36;
}
a.home_links:focus {
  text-decoration: none;
  color: #5c8a36;   
}

或者，如果元素动态生成以及内联样式，那么您可以使用这样的选择器覆盖内联css：

a.home_links[style]:hover {
    color: #5c8a36 !important; 
}

Example Fiddle 使用选择器覆盖技巧

Answer 2

使用它可以为你工作

 <%= link_to "Business Development", business_development_path, :class => 'home_links', :style => 'color: white'; %>



  <style type="text/css">
         .home_links:hover{
           color:#57a22b!important;
         }
     </style>

Answer 3

内联样式:style => 'color: white';优先于外部或内部样式。删除它以使您的CSS生效

Answer 4

您似乎已将悬停和非悬停样式指定为相同的颜色。您需要悬停样式才能看到更改。

Answer 5

你试过这个：

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

如何使link_to链接在悬停时更改颜色

5 个答案: