在css/scss或javacript中定位動態類名稱

Question

在我的rails應用程序中，我有兩個模型，用戶和目標。用戶可以擁有多個目標，目標屬於用戶。我有一個頁面，列出用戶顯示頁面中的所有用戶目標。這是使用.each循環完成的，並且在此循環中，我創建了一個動態類名，將goal_id放入類名中。

我希望能夠在我的css/scss文件夾中定位這些單獨的類，例如，當我將鼠標懸停在它上面時，我可以僅突出顯示第一個目標。

應用程序/視圖/用戶/ show.html.erb

<div class="user-goals-mouse-events"> 
<% @user.goals.each do |goal| %> 
    <%= link_to goal_path(goal), class: "user-goals-hover-#{goal.id}" do %> 
      <div class="row"> 
       <div class="col-md-4"> 
        <h2 class="color-light-blue"><%= goal.name %></h2> 
       </div> 
       <div class="col-md-8 user-goals-description"> 
        <h4><%= goal.description %></h4> 
       </div> 
      </div> 
      <h6 class="hide-username-<%= goal.id %>"><%= @user.username %></h6> 
    <% end %> 
<% end %> 

的SCSS當前沒有工作，但它可以幫助顯示什麼，我試圖做的。 應用程序/資產/樣式表/ custom.css.scss

.user-goals-mouse-events > a { 
    border-bottom-style: solid; 
    border-bottom-color: black; 
    border-bottom-width: 1px; 
    //background-color: black; 
    &:hover { 
     background-color: #26AEFF; 
     color: gold; 
    } 
} 

.user-goals-mouse-events > div > h6 { 
    opacity: 0; 
} 

.color-light-blue { 
    color: #26AEFF; 
    &:hover { 
     color: white; 
    } 
} 

如果較好地解決了這個問題做了不同的方式（例如，用javascript），那麼請讓我知道，因爲我想這樣做的最有效辦法。

Answer 1

嘗試使用屬性 - 值 - 開始 - 與選擇：

a[class^=user-goals-hover] { 
    border-bottom-style: solid; 
    border-bottom-color: black; 
    border-bottom-width: 1px; 
    //background-color: black; 

    &:hover { 
    background-color: #26AEFF; 
    color: gold; 
    } 
}