使用Angular通过鼠标悬停更改颜色

Getting change color with mouse hover to work using Angular

本文关键字：颜色 悬停 鼠标 Angular 使用      更新时间：2023-09-26

http://codepen.io/Feners4/pen/KggAwg

我想用Angular鼠标悬停来改变立方体的颜色。我设法使它在立方体的一侧起作用，但我希望这种效果能改变整个立方体的颜色。

这是我的HTML:

<header>
  Angularity
</header>
<h1>hjskl</hi>
<body>
  <div class="container" ng-controller="AppCtrl">
            </div>
  </header>
<div class="wrap">
    <div ng-app="App" class="cube"change-background colorcode=¨#FE0883¨>
        <div class="front">AAA</div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</div>
</header>
<div class="wrap2">
    <div class="cube2">
        <div ng-app="App" class="front2" change-background colorcode=¨#FE0883¨>AAA</div>
        <div class="back2"></div>
        <div class="top2"></div>
        <div class="bottom2"></div>
        <div class="left2"></div>
        <div class="right2"></div>
    </div>
</div>

我的JS:

angular.module('App', [])
  .directive('changeBackground', ['$animate', function($animate) {
    return {
      restrict: 'EA',
      scope: {
        colorcode: '@?'
      },
      link: function($scope, element, attr) {
        element.on('mouseenter', function() {
          element.addClass('change-color');
          element.css('background-color', $scope.colorcode);
        });
        element.on('mouseleave', function() {
          element.removeClass('change-color');
          element.css('background-color', '#fff');
        });
      }
    };
  }])

我如何让立方体在鼠标悬停时更改颜色，当鼠标离开时，它又变回来？

这里的主要问题之一是如何定义ng-app，正如我在评论中所说，它定义了Angular要使用的应用程序的根。将其放置在这样一个特定的位置将意味着没有其他元素连接到Angular。需要做的第一件事是，您的HTML应该被清理，有重复的关闭header标记，没有打开，也没有关闭body。由于你从未定义过控制器，而且它没有被使用，我删除了它(否则它会抛出错误(之后，你可以在body上定义你的ng-app，这将允许在任何元素上使用你的指令：

<html>
<header>
  Angularity
</header>
<h1>hjskl</hi>
<body ng-app="App">
<div class="wrap">
    <div class="cube"change-background colorcode=¨#FE0883¨>
        <div class="front">AAA</div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</div>
<div class="wrap2">
    <div class="cube2">
        <div class="front2" change-background colorcode=¨#FE0883¨>AAA</div>
        <div class="back2" change-background ></div>
        <div class="top2" change-background></div>
        <div class="bottom2" change-background></div>
        <div class="left2" change-background></div>
        <div class="right2" change-background></div>
    </div>
</div>
</body>
</html>
相关文章：