change width of array member when width is fixed with style

Question

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) ?

The code works fine for me. You can also do this with css only by the way. jsfiddle.net/ar5pL14z/2 — Furkan Poyraz
– Furkan Poyraz, Commented Jul 5, 2018 at 9:24
@Furkan; yes somehow it started to work here as well, don't know what went wrong. Thanks for you time Furkan — Ewald Bos
– Ewald Bos, Commented Jul 25, 2018 at 8:47

Ashutosh · Accepted Answer · 2018-07-05 09:28:55Z

1

add this CSS.

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

answered Jul 5, 2018 at 9:28

Ashutosh

1383 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ewald Bos · Accepted Answer · 2018-07-25 08:49:15Z

0

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

answered Jul 25, 2018 at 8:49

Ewald Bos

1,8401 gold badge22 silver badges36 bronze badges

Collectives™ on Stack Overflow

change width of array member when width is fixed with style

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related