html - 如何为列表项的悬停和非悬停行为动态设置背景图片 url？

Question

我有一个要求，尽管有默认列表项，但用户可以在其中创建新的列表项。因此，用户将被允许为列表项附加两个图标图像，以在悬停列表项和非悬停列表项时显示。所以，现在我想将背景图像更改为在 ng-repeat 中迭代的对象属性中的给定 URL。我一直在尝试使用 jquery 来获取属性及其值，但无法替换为悬停时对象的 hover_image URL。

<ul id="user_events_list" class="listing_categories" ng-repeat="event in privateEventItems">
    <li class="eventListItem" style="background-image :url('{{event.eventIconUrl}}'); background-position:10px; background-repeat : no-repeat; padding-left:30px;">{{event.eventName}}
    </li>
</ul>

我想在鼠标悬停在列表项上时将 {{event.eventIconUrl}} 更改为 {{event.eventHoverIconUrl}}。谁能帮我解决这个问题？

Answer 1

您可以使用 ng-mouseenter 和 ng-mouseleave 事件。

<ul id="user_events_list" class="listing_categories" ng-repeat="event in privateEventItems">
    <li class="eventListItem" ng-init="anyChosenVariableNameForUrls=event.eventIconUrl"
        style="background-image :url('{{anyChosenVariableNameForUrls}}'); background-position:10px; background-repeat : no-repeat; padding-left:30px;"
        ng-mouseenter="anyChosenVariableNameForUrls=event.eventHoverIconUrl"
        ng-mouseleave="anyChosenVariableNameForUrls=event.eventIconUrl"
    >{{event.eventName}}
    </li>
</ul>