如何使link_to鏈接在懸停時更改顏色

Question

我想讓我的3個鏈接在懸停時更改顏色，這是我擁有的CSS

a {
  color: #5c8a36;
}

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

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

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

由於某些原因，此設置在懸停時鏈接不會更改。 我不確定該怎么做。 任何建議表示贊賞。

編輯：我希望這些特定的鏈接顯示為白色，然后在懸停時將顏色更改為與其余鏈接相同。

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

---

使用選擇器替代技巧的示例小提琴

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