0
http://codepen.io/Feners4/pen/KggAwgのマウスをキューブ上に置くと、ラップ内のすべての要素が色を変更する方法を教えてください。現在のところ、マウスを置いた片面だけを変更することができます。私はこれをAngularで厳密に行い、学習目的にしたい。複数の要素をマウスでホバーして角度を変更する
これは私のHTMLです:
<html>
<header>
Angularity
</header>
<h1>hjskl</hi>
<body ng-app="App">
<div class="wrap">
<div class="cube"change-background colorcode=¨#f45642¨>
<div class="front" change-background>AAA</div>
<div class="back" change-background></div>
<div class="top" change-background></div>
<div class="bottom" change-background></div>
<div class="left" change-background></div>
<div class="right" change-background></div>
</div>
</div>
<div class="wrap2">
<div class="cube2">
<div class="front2" change-background colorcode=¨#f45642¨>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>
これは私の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', '@red');
});
}
};
}])
恐ろしい!ありがとう! – feners
@feners問題ありません。私は実際にそれがあなたの最後の質問からあなたが欲しいものであることに気付かなかった。 –