複数の要素をマウスでホバーして角度を変更する

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'); 
     }); 
     } 
    }; 
    }])

出典

2016-10-13 feners

一つの方法は、その後に使用.children()内、立方体の辺の親に自分のディレクティブを追加することですそれぞれの子アイテムに関数を適用します。また、あなたのクラスchange-colorには:fooがないと一般的になりたいと思うでしょう。さもなければ、それらはすべて、そのクラスを持っていても、その要素は適用されます。

HTML

<div class="wrap"> 
    <div class="cube" change-background colorcode=¨#f45642¨> 
     <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" change-background> 
     <div class="front2" colorcode=¨#f45642¨>AAA</div> 
     <div class="back2"></div> 
     <div class="top2"></div> 
     <div class="bottom2"></div> 
     <div class="left2"></div> 
     <div class="right2"></div> 
    </div> 
</div>

link: function($scope, element, attr) { 
    element.on('mouseenter', function() { 
     element.children().addClass('change-color'); 
     element.children().css('background-color', $scope.colorcode); 
    }); 
    element.on('mouseleave', function() { 
     element.children().removeClass('change-color'); 
     element.children().css('background-color', '@red'); 
    }); 
    }

CSS

.change-color { 
    color: #fff; 
    background-color: #f45642; 
    cursor: pointer; 
}

Pen Example

出典

2016-10-13 22:28:00

恐ろしい！ありがとう！ – feners

@feners問題ありません。私は実際にそれがあなたの最後の質問からあなたが欲しいものであることに気付かなかった。 –

複数の要素をマウスでホバーして角度を変更する

答えて

関連する問題