7

我想更改一个 div 的类，同时使用 AngularJS 指令将鼠标悬停在另一个 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){
}

有任何想法吗？

4

2 回答 2

6

更改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 解析器代码之后，我找不到一种方法来“帮助”它区分破折号和减号。

于 2013-08-22T20:57:48.833 回答
0

您需要从 my-class 中删除连字符，以便它在您的 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";
}
于 2013-08-22T21:31:42.643 回答