如何在使用 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/

HMTL

<div ng-class="my-class">当鼠标悬停在底部 DIV </div> 时，这个 div 将改变类<br/><div class="hover-div" ng-mouseenter="my-class = 'highlight'" ng-mouseleave="my-class = 'lowlight'">悬停在我身上以更改 UPPER DIV 的班级</div>

CSS

div.highlight {填充:10px；背景:红色；白颜色;}div.lowlight {填充:10px；背景:蓝色；白颜色;}div.hover-div {填充:10px；背景:绿色；白颜色;}

JS

function Ctrl($scope){}

有什么想法吗?

解决方案

将 my-class 更改为 myclass(即破折号导致问题).

<div ng-class="myclass">当鼠标悬停在底部 DIV </div> 时，这个 div 将改变类<br/><div class="hover-div" ng-mouseenter="myclass = 'highlight'" ng-mouseleave="myclass = 'lowlight'">悬停在我身上以更改上级 DIV 的班级</div>

更新: 表达式中不允许使用 my-class 的原因是因为 AngularJS 将破折号视为减号并尝试以这种方式解析它.显然，它无法解析语句 my - class = 'highlight'.不幸的是，在阅读了 AngularJS 解析器代码后，我找不到帮助"它区分破折号和减号的方法.

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?

解决方案

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.

这篇关于如何在使用 AngularJS 悬停在另一个 div 上时更改一个 div 上的类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！