Question

我希望使用AngularJS指令将鼠标悬停在另一个div上时更改一个div的类。这是我到目前为止http://jsfiddle.net/E8nM5/38/

HMTL

<div ng-controller="Ctrl" ng-app>
   <div ng-class="my-class">This div will change class when one hovers over bottom DIV </div>
   <br/>
   <div class="hover-div" ng-mouseenter="my-class = 'highlight'" ng-mouseleave="my-class = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>    
</div>

CSS

div.highlight {
    padding: 10px;
    background: red;
    color: white;
}

div.lowlight {
    padding: 10px;
    background: blue;
    color: white;
}

div.hover-div {
    padding: 10px;
    background: green;
    color: white;
}

JS

function Ctrl($scope){
}

有什么想法吗？

Answer 1

将my-class更改为myclass（即短划线导致问题）。

<div ng-controller="Ctrl" ng-app>
    <div ng-class="myclass">This div will change class when one hovers over bottom DIV </div>
    <br/>
    <div class="hover-div" ng-mouseenter="myclass = 'highlight'" ng-mouseleave="myclass = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>    
</div>

更新：表达式中不允许my-class的原因是因为AngularJS将短划线视为减号，并尝试以这种方式解析它。显然，它无法解析语句my - class = 'highlight'。不幸的是，在阅读AngularJS解析器代码后，我找不到一种方法来“帮助”区分短划线和减号。

Answer 2

您需要从我的类中删除连字符，以便它在您的Controller中正常工作。除此之外，看起来你已经完成了它。这是一个小片段 - 我还在div中将其添加为文本，以便您可以看到它更改

您的HTML文件：

<div class="{{myClass}}"> {{myClass}} </div>

     <div class="hover" style="height:50px; width:50px; border:1px solid black;" ng-mouseleave="myClass='test'" ng-mouseenter="myClass='hola'"> </div>

控制器

function Ctrl($scope){
    $scope.myClass="test";
}

如何在使用AngularJS将鼠标悬停在另一个div上时更改一个div上的类？

2 个答案:

您的HTML文件：

控制器