Change model value on hover of div element in emberjs

I am trying to create a component some thing like list view where each item is a div. On hover of an item it gets highlighted and also 2 icons should appear, for these icons to appear I can monitor model variable and change class accordingly. Is this correct thought process, or is there a simpler way.

At present I am unaware on how to change model variable on hover over div element. Please help in either of 2 mentioned ways

1. Help in changing model variable on hover over div element
2. Is there a better way to do this kind of work in emberjs?

list-view.hbs

<div class="listViewContainer">
    <div class="dropdown ulContainer">
      
        <div class="listItem row">
            <div class="message col-md-10">
                
                    <span class="counter"></span>
                
                    
                
            </div>            
            <div class="actions col-md-2">
                <img src="assets/images/filter_add.svg" class=""  width="25px" height="25px"/>
                
                    <img class="actionsCol" src="assets/images/action_menu.svg" data-toggle="tooltip" data-placement="top" title="Action" alt="Action" />
                
            </div>
        </div>
        <hr class="divider"/>
      
    </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);
    }
}

Current view screenshot

The desired outcome needed