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>

因此，这里发生的情况是，使用代码将item容器的宽度设置为10像素宽（它覆盖了CSS）。可以将其更改为宽度不超过100像素的任何宽度。因此，一切都变得像手风琴。所有这些都能找到，我想做的是，当我将鼠标悬停在“ itemContainer”上时，该数组变为100px宽。我试图用它来做，但是不能使它起作用；

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

我什至在控制台日志中都没有得到“成功”，如果我在代码中使用其他元素，则可以正常工作。改变这一元素的大小（AngularJS / Javascript / JQuery）的解决方案是什么？

Answer 1

添加此CSS。

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

Answer 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的组合代码作为答案

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

2 个答案: