html - active_link_to 列表项在非事件 CSS img 按钮时消失

Question

我在使用 active_link_to 显示第 n 个 css 按钮/列表元素时遇到了问题。第一个 css 按钮显示没有问题并且处于事件状态。当我向列表添加新按钮时，它们会消失。

HTML

<li class="nav-item">
            <%= active_link_to '', profile_path, class_active: 'nav-link home-icon-btn active', :class_inactive => 'nav-link', active: :exclusive %>
          </li>
          <li class="nav-item">
            <%= active_link_to '', analytics_path, class_active: 'nav-link analytics-icon-btn active', :class_inactive => 'nav-link' %>
          </li>

CSS

.home-icon-btn {
  background:url('white-home-btn-state-1.png') no-repeat;
  cursor:pointer;
  border:none;
  height: 53px;
  width: 50px;

}

.home-icon-btn:hover {
  background: url('white-home-btn-state-2.png') no-repeat;
  cursor: pointer;
}

.analytics-icon-btn {
  background:url('white-analytics-btn-state-1.png') no-repeat;
  cursor:pointer;
  border:none;
  height: 53px;
  width: 50px;
}

.analytics-icon-btn:hover {
  background: url('white-analytics-btn-state-2.png') no-repeat;
  //cursor: pointer;
}
a.active {
  border-bottom: 2px white solid;
  border-spacing: 5px;
  border-collapse: separate;
}

Answer 1

我还必须将按钮的 css 类添加到非事件状态。

<%= active_link_to '', analytics_path, class_active: 'nav-link analytics-icon-btn active', :class_inactive => 'nav-link analytics-icon-btn' %>