emberjs에서 div 요소의 마우스 오버시 모델 값 변경

Question

각 항목이 div 인 목록보기와 같은 구성 요소를 만들려고합니다. 항목을 가리키면 강조 표시되고 2 개의 아이콘이 나타나야합니다. 아이콘이 나타나기 때문에 모델 변수를 모니터링하고 이에 따라 클래스를 변경할 수 있습니다. 이 올바른 생각 과정인가, 아니면 더 간단한 방법인가?

현재 div 요소 위로 마우스를 가져갈 때 모델 변수를 변경하는 방법을 알지 못합니다. DIV 요소

emberjs에서 이런 일을 할 수있는 더 나은 방법이 있나요 위로 마우스에 모델 변수를 변경에서이 언급 한 방법

1. 도움말
   중 하나를 도와주세요?

리스트 view.hbs

<div class="listViewContainer"> 
    <div class="dropdown ulContainer"> 
     {{#each data as |item|}} 
     <div class="listItem row"> 
      <div class="message col-md-10"> 
       {{#if (eq dataCount 2)}} 
        <span class="counter">{{item.doc_count}}</span>{{item.key}} 
       {{else}} 
        {{item.key}} 
       {{/if}} 
      </div>    
      <div class="actions col-md-2"> 
       <img src="assets/images/filter_add.svg" class="" {{action "toggleFilterCollapsed"}} width="25px" height="25px"/> 
       {{#if settingsNeeded}} 
        <img class="actionsCol" src="assets/images/action_menu.svg" data-toggle="tooltip" data-placement="top" title="Action" alt="Action" {{action '' item.key}}/> 
       {{/if}} 
      </div> 
     </div> 
     <hr class="divider"/> 
     {{/each}} 
    </div> 
</div> 

CSS

.listViewContainer { 
    text-align: left; 
    .ulContainer { 
     height: 100%; 
     line-height: 2em; 
     padding: 0; 
     margin: 0; 
     overflow-x: hidden; 
    } 
    .listItem:hover { 
     background-color:#E2F1FD; 
     opacity: 1; 
     filter: alpha(opacity=100); 
     border: 1px solid #71B8FF; 
     border-radius: 5px; 
    } 
    .listItem { 
     padding: 5px; 
     list-style-position: inside; 
     list-style: none; 
     word-wrap: break-word; 
     margin-left: 0px; 
     margin-right: 0px; 
     border-radius: 5px; 
    } 
    .counter { 
     font-family: $app-font; 
     font-size: 20px; 
     margin-right: 18px; 
    } 
    .message { 
     padding-right: 0px; 
     padding-left: 0px; 
    } 
    .actions { 
     float: right; 
     padding-right: 10px; 
    } 
    .divider { 
     margin-top: 2px; 
     margin-bottom: 2px; 
     margin-left: 0px; 
     border-top: none;  
    }  
    .actionsCol { 
     display: inline-block; 
     height: 20px; 
     width: 20px; 
     cursor: pointer; 
     opacity: 0.2; 
     filter: alpha(opacity=0); 
    } 
} 

현재보기 스크린 샷

원하는 결과가,691,363 필요210

Answer 1

상위 요소의 호버 규칙에 하위 요소를 배치하여 상위 CSS에서 하위 요소의 CSS를 변경할 수 있습니다.

actions CSS 클래스를 표시 속성으로 설정하고 display: none 속성을 actions CSS 클래스 .listItem:hover에 추가하십시오. 모든 변화를 감안할 때.

.listItem:hover { 
    background-color:#E2F1FD; 
    opacity: 1; 
    filter: alpha(opacity=100); 
    border: 1px solid #71B8FF; 
    border-radius: 5px; 
    .actions { 
     display: block; 
    } 
} 
... 
.actions { 
    float: right; 
    padding-right: 10px; 
    display: none; 
}