hola que tal? soy nueva en el mundo del desarrllo y tengo que entregar un proyecto de frontend. que utilice angularJs, JavaScript, Jquery...
mi pregunta es la siguiente pues estoy muy trabada con esto y no se como hacer...
tengo un archivo JSON donde guardo datos que muestro en la pagina, los datos los muestro atraves de HTTP y utilizo ng-repeat para que muestre todos los que estan dentro de ese object, los muestra como cuadrados independientes que son links para otra pagina.
ahora quiero que cuando paso el mouse por uno de los div el div muestre otro contenido y se ponga en opacity 0.9 y cuando saco el mouse del div vuelve todo a la normalidad.
angular.module("myApp").
controller('cookingCtrl', function ($scope, $http){
$http.get("js/main.json").then(function(response) {
//MAIN PAGE
$scope.myRecipe = response.data.Main;
$scope.description = function(){
$('.thumbnail').hover(function(){
$('.description').fadeIn(50);
}, function(){
$('.description').fadeOut(0);
});
};
y lo llamo atraves de ng-mouseover="description()"
el codigo anda pero cuando paso por el mouse me muestra en todos los div lo escrito y no segun en donde pase el mouse....
<div class=" container-fluid text-center">
<div class="row">
<div class="col-sm-9" ng-controller="cookingCtrl">
<div class="row">
<div class="col-sm-4" ng-repeat="item in myRecipe">
<div class="thumbnail" id="{{item.id}}">
<a href="{{item.url}}">
<div class="description">{{item.description}}</div>
<img src="{{item.src}}" alt="{{item.name}}" ng-mouseover="description()">
<div class="caption">
<p><strong>{{item.name}}</strong></p>
</div>
</a>
</div>
</div>
</div>
</div> alguna idea como puedo hacer?
gracias!!!!!
