如何使用AngularJS将鼠标悬停在另一个div上时在一个div上更改类? [英] How to change the class on one div while hovering over another div with AngularJS?
问题描述
我想更改一个div的类,同时使用AngularJS指令将鼠标悬停在另一个div上.这是我到目前为止的内容 http://jsfiddle.net/E8nM5/38/
I want to change the class of one div while hovering over another div using AngularJS directives. Here is what I have so far 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
(即破折号会引起问题).
Change my-class
to myclass
(i.e. the dash causes problem).
<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解析器代码后,我找不到帮助"区分破折号和减号的方法.
Updated: the reason my-class
isn't allowed in the expression is because AngularJS treats the dash as minus symbol and tries to parse it that way. Apparently, it can't parse the statement my - class = 'highlight'
. Unfortunately, after reading AngularJS parser code, I can't find a way to "help" it distinguish between dash and minus.
这篇关于如何使用AngularJS将鼠标悬停在另一个div上时在一个div上更改类?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!