使用样式固定宽度时更改数组成员的宽度答案

【问题标题】：change width of array member when width is fixed with style使用样式固定宽度时更改数组成员的宽度
【发布时间】：2018-07-05 09:10:23
【问题描述】：

我有以下代码：

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）。这可以更改为不超过 100 像素的任何宽度。所以这一切都变得像手风琴一样。这一切都有效，我想做的是，当我将鼠标悬停在“数组成员”上时，“itemContainer”会变成 100px 宽。我试过这样做，但无法让它发挥作用；

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

我什至没有在控制台日志中看到“作品”，如果我在代码中使用不同的元素，它可以正常工作。什么是使这个元素改变大小的解决方案（AngularJS/Javascript/JQuery）？

【问题讨论】：

代码对我来说很好用。顺便说一句，您也可以仅使用 css 执行此操作。 jsfiddle.net/ar5pL14z/2
@Furkan;是的，不知何故它也开始在这里工作，不知道出了什么问题。谢谢你抽时间Furkan

标签： javascript jquery html css angularjs

【解决方案1】：

添加此 CSS。

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

【讨论】：

【解决方案2】：

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

Furkan 的组合代码作为答案添加

【讨论】：