Question

在我的rails应用程序中，我有两个模型，Users和Goals。用户可以拥有多个目标，目标属于用户。我有一个页面列出了用户显示页面中的所有用户目标。这是使用.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

尝试使用attribute-value-begin-with selector：

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

Answer 2

@hashrocket的答案很好，但是我建议您在课堂上更明确。当您需要一个两者类用于样式和定位时，这是一种代码味道。

是的，CSS中也有代码异味！：）

我将拥有一个用于样式的常量类，以及一个用于定位的动态或什至完全不同的属性：

<%= link_to goal_path(goal), class: "user-goals", data: {goal_id: goal.id} do %>

将呈现为

<a href="/goals/42" class="user-goals" data-goal-id="42">

而CSS就是

.user-goals {
  //...

  &:hover {
    //...
  }
}

在css / scss或JavaScript

2 个答案: