我有一个要求,尽管有默认列表项,但用户可以在其中创建新的列表项。因此,用户将被允许为列表项附加两个图标图像,以在悬停列表项和非悬停列表项时显示。所以,现在我想将背景图像更改为在 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}}
。谁能帮我解决这个问题?
最佳答案
您可以使用 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>
关于html - 如何为列表项的悬停和非悬停行为动态设置背景图片 url?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41764093/