Y.Hewa Y.Hewa - 1 month ago 9
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>
</div>

</div>


</div>
<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>
{{index}}
</div>
</div>


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?

UPDATEE

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

Add this to your CSS:

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

This uses CSS to define a hover style.