Question

我正在尝试创建一个组件，例如列表视图，其中每个项目都是div。在项目悬停时，它会突出显示，并且还会出现2个图标，为了显示这些图标，我可以监控模型变量并相应地更改类。这是正确的思考过程，还是有一种更简单的方法。

目前我不知道如何在悬停在div元素上时更改模型变量。请以两种方式提供帮助

帮助在悬停在div元素上时更改模型变量
在emberjs中有更好的方法来做这种工作吗？

列表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);
    }
}

当前视图屏幕截图

需要预期的结果

Answer 1

您可以通过将子元素放在父级的悬停规则中来改变父级CSS上的子CSS。

在您的情况下，将actions CSS类的显示属性设置为无，并将display: none属性添加到actions内.listItem:hover内的CSS类。鉴于以下所有变化。

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

在emberjs中改变div元素悬停时的模型值

1 个答案: