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

Question

I have a requirement where in the user can create new list items inspite of having default list items. So The user will be allowed to attach two icon images for the list items to show on hover of list item and on non hover of list item. So, now I want to change the background image to the given URL's in the property of the object that is iterated in ng-repeat. I have been trying using jquery to get the property and its value but couldn't replace with the hover_image URL from the object on hover.

<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>

I want to change the {{event.eventIconUrl}} to {{event.eventHoverIconUrl}} on mouse hover on the list item. Can anyone help me out with this?

Answer 1

You may use ng-mouseenter and ng-mouseleave events.

<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>

Answer 2

Try this:

 $('#name img').hover(function() { $(this).attr('src', 'https://developers.google.com/maps/images/lhimages/api/icon_placesapi.svg'); }, function() { $(this).attr('src', 'http://icons.iconarchive.com/icons/fasticon/web-2/256/Google-icon.png'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" id="name"> <img title="Hello" src="http://icons.iconarchive.com/icons/fasticon/web-2/256/Google-icon.png" /> </a>

Answer 3

To do it in angular way see this Fiddle

use ng-mouseover and ng-mouseleave directives to detect mouse hover and leave.