我想在使用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){ }
有任何想法吗?
将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解析器代码后,我找不到一种方法来“帮助”它区分破折号和减号.