Y.Hewa Y.Hewa - 9 months ago 52
JSON Question

Adding ng-mouseover on a image from json file

I have the follwing code :

<div class="container" ng-controller="ListCtrl">
<div class="col-md-2-4" ng-class="{'div-hide': index > $index + 1}" ng-repeat="question in questions">
<div>{{question.qid}} {{question.question}} </div>
<div class="row">
<div class="col-lg-3 col-md-4 col-s-6 thumb" ng-repeat="image in question.images">
<div ng-mouseover="style={'background-color':'gray','cursor':'pointer'}">
<img class="img-responsive " id="{{image.imageid}} " src="{{image.imgpath}} " alt=" " >


<div class="keys">
<button type="button " class="btn btn-next " ng-click="index=index < questions.length ? index + 1 : questions.length ">Next</button>
<button type="button " class="btn btn-pre " ng-click="index=index> 1 ? index - 1 : 1">Previous</button>

In the img tag i have added a mouse over so that when the mouse goes over the image it will give gray background etc. however its not working. Does anyone know why?


so ive edited it and tried adding css to the div but that does not seem to work either.. heres the updated plunker ..http://plnkr.co/edit/DqNRnc8xYZn73vdkWjaG?p=preview Please someone helpp!

Answer Source

Add this to your CSS:

#imgbutton:hover, #imgbutton:active {
  background-color: gray;

This uses CSS to define a hover style.