CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Ewald Bos
Ewald Bos

Reputation: 1770

change width of array member when width is fixed with style

I have the following code:

JS/ANGULAR:
$scope.width = 10;
$scope.items = DATA taken from JSON about 2000 rows

CSS:
.theImage{width:100px}
.itemcontainer{width:100px}

<div class="container" id="container"> 
  <div class="itemcontainer" ng-repeat="item in items" style="{{width}}px">
     <div class="item">
       <img class="theImage" src="http://...." />
     </div>
  </div>
</div>

So what happens here is that the width of the item container is set with code to 10 pixels wide (it overrules the CSS). This can be changed to any width no wider as 100px. So it all becomes like a accordion. This all works find, what i want to do is that when i hover over an 'array-member' the 'itemContainer' that this one becomes 100px wide. i tried doing it with this but can't get it to function;

$('.itemcontainer').hover(function () {
     $(this).css("width", "100px");
     console.log("WORKS")
 });

I don't even get the 'works' in the console log, if i use a different element in my code it works fine. What would be a solution to make this one element change in size (AngularJS/Javascript/JQuery) ?

Upvotes: 0

Views: 57

Answers (2)

Ewald Bos
Ewald Bos

Reputation: 1770

HTML:

<div class="container" id="container"> 
  <div class="itemcontainer" ng-repeat="item in items" style="width:10px">
     <div class="item">
       <img class="theImage" src="http://...." />
     </div>
  </div>
</div>

CSS:

.itemcontainer { background: orange; }

JAVASCRIPT:

$('.itemcontainer').hover(function () {
  $(this).css("width", "100px");
  console.log("WORKS")
});

Combined code of Furkan added as the answer

Upvotes: 0

Ashutosh
Ashutosh

Reputation: 138

add this CSS.

.itemcontainer:hover{
  width: 100px !important;
 }

Upvotes: 1

Related Questions