비활성 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' %>