使用鼠標懸停和角度更改多個元素

如何在包裝中的所有元素在鼠標懸停在多維數據集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，否則CSS仍然只適用於懸停的元素，即使他們都有類。

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沒問題。我其實並沒有注意到這是你最後一個問題想要的。 –

使用鼠標懸停和角度更改多個元素

回答

相關問題