How to change the class on one div while hovering over another div with AngularJS?
11,487
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>
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.
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Author by
Admin
Updated on June 09, 2022Comments
-
Admin about 2 years
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){ }
Any ideas?
-
siddhant3s almost 10 yearsThere is no reason to differentiate between the two.
my-class
is an invalid Javascript variable name. That's it. One should understand thatmyclass
is a Javascript variable and not a CSS Class. So the naming rules to be followed if of JS and not CSS. -
Buu almost 10 years@siddhant3s one can assign
$scope['my-class'] = ...
, which is both valid JS and AngularJS. So the OP asked a perfectly reasonable question and it would certainly be helpful if AngularJS can support that.