How To Highlight Item On Hover?

I´m integrating a Google Maps in an AngularJS 1.0.7 website. I have a list of items with pictures. In the other hand each item is displayed with an infoWindow in the map. What I w

Solution 1:

You can use ng-mouseover to flag the car to highlight

<ul><ling-repeat="car in cars"ng-mouseover="car.highlight = true">
      {{car.id}}: {{car.price}} (please, highlight the infoWindow in map onmouseover)
   </li></ul>

Then change the class on the div with ng-class:

var content = '<divid="iw"ng-click=showDetails()ng-class="{'highlight': car.highlight}">{{infoWindowText}} €</div>';

Define the css class highlight to highlight your div

Update

I updated your plunker to change ng-class attribute. Car id must be resolved before ng-class because it is not in the directive scope:

ng-class="{highlight: ' + cars[i].id + ' == selectedCar}"

If you want update the InfoWindow style, you need to retrieve the InfoWindow from the car when the car selected change. You can add a watch on selectedCar in you directive, get the infoWindow matching then edit the style with JQuery