изменить ширину элемента массива, когда ширина фиксируется стилем

Question

У меня есть следующий код:

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>

Итак, что здесь происходит, так это то, что ширина контейнера элемента устанавливается с кодом шириной 10 пикселей (это отменяет CSS). Это может быть изменено на любую ширину, не более 100px. Так что все становится как баян. Все, что я хочу сделать, это найти то, что я хочу сделать, чтобы при наведении курсора на «член массива» на «itemContainer», ширина этого элемента составляла 100 пикселей. Я пытался сделать это с этим, но не могу заставить его работать;

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

Я даже не получаю 'works' в журнале консоли, если я использую другой элемент в моем коде, он работает нормально. Каким было бы решение изменить размер этого элемента (AngularJS / Javascript / JQuery)?

Answer 1

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")
});

Комбинированный код Фуркана добавлен в качестве ответа

Answer 2

добавить этот CSS.

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