Thay đổi lớp khi di chuột qua chỉ thị

Question

Tôi đang gặp khó khăn khi tìm hiểu cách để lớp học thay đổi theo chỉ thị lồng nhau.

Đây là bên ngoài ng-repeat

<div data-courseoverview data-ng-repeat="course in courses | orderBy:sortOrder | filter:search" 
     data-ng-controller ="CourseItemController" 
     data-ng-class="{ selected: isSelected }"> 

Dưới đây là nội ng-repeat được sử dụng một chỉ thị

    <li data-ng-repeat="item in social" class="social-{{item.name}}" ng-mouseover="hoverItem(true);" 
       ng-mouseout="hoverItem(false);" 
       index="{{$index}}"><i class="{{item.icon}}" 
       box="course-{{$index}}"></i></li> 

Dưới đây là im chỉ thị kêu gọi sự kiện hover

ecourseApp.directive("courseoverview", function() { 
    return {  
    restrict : 'A',  
    replace: true, 
    /*scope: { 
     index: '@' 
    },*/   
    transclude: true,  
    templateUrl: "views/course-overview.html", 
    link: function link(scope, element, attrs) { 
     scope.switched = false; 
     //hover handler 
     scope.hoverItem = function(hovered){ 
      if (hovered) { 
       element.addClass('hover'); 
       $('#course-0 figure').addClass('tint') 
      } 
      else 
       element.removeClass('hover'); 
     }; 
    } 
}}); 

Nhu cầu này $('#course-0 figure').addClass('tint') để thay đổi mục gọi.

Cảm ơn

Answer 1

Tôi nghĩ rằng nó sẽ được dễ dàng hơn nhiều để đặt một thẻ anchor xung quanh i. Bạn chỉ có thể sử dụng bộ chọn css :hover. Các bộ phận ít chuyển động giúp bảo trì dễ dàng hơn và ít javascript hơn để tải làm cho trang nhanh hơn.

này sẽ làm các trick:

<style> 
a.icon-link:hover { 
    background-color: pink; 
} 
</style> 

<a href="#" class="icon-link" id="course-0"><i class="icon-thumbsup"></id></a> 

jsfiddle example

Answer 2

Nói chung tôi hoàn toàn đồng ý với việc sử dụng selector css của Jason, nhưng trong một số trường hợp, bạn có thể không muốn thay đổi css, ví dụ khi sử dụng css-template của bên thứ 3, và thay vì thích thêm/xóa lớp trên phần tử.

Các mẫu sau đây cho thấy một cách đơn giản để thêm/loại bỏ một lớp trên ng-mouseenter/MouseLeave:

<div ng-app> 
    <div 
    class="italic" 
    ng-class="{red: hover}" 
    ng-init="hover = false" 
    ng-mouseenter="hover = true" 
    ng-mouseleave="hover = false"> 
     Test 1 2 3. 
    </div> 
</div> 

với một số phong cách:

.red { 
    background-color: red; 
} 

.italic { 
    font-style: italic; 
    color: black; 
} 

Xem chạy ví dụ ở đây: jsfiddle sample

Tạo kiểu trên lơ lửng là mối quan tâm về chế độ xem. Mặc dù giải pháp ở trên đặt thuộc tính "di chuột" trong phạm vi hiện tại, bộ điều khiển không cần phải lo lắng về điều này.

Answer 3

Đây là giải pháp của tôi cho kịch bản của tôi: nhà nước

<div class="btn-group btn-group-justified"> 
    <a class="btn btn-default" ng-class="{'btn-success': hover.left, 'btn-danger': hover.right}" ng-click="setMatch(-1)" role="button" ng-mouseenter="hover.left = true;" ng-mouseleave="hover.left = false;"> 
     <i class="fa fa-thumbs-o-up fa-5x pull-left" ng-class="{'fa-rotate-90': !hover.left && !hover.right, 'fa-flip-vertical': hover.right}"></i> 
     {{ song.name }} 
    </a> 
    <a class="btn btn-default" ng-class="{'btn-success': hover.right, 'btn-danger': hover.left}" ng-click="setMatch(1)" role="button" ng-mouseenter="hover.right = true;" ng-mouseleave="hover.right = false;"> 
     <i class="fa fa-thumbs-o-up fa-5x pull-right" ng-class="{'fa-rotate-270': !hover.left && !hover.right, 'fa-flip-vertical': hover.left}"></i> 
     {{ match.name }} 
    </a> 
</div> 

mặc định:

trên di chuột:

Answer 4

tôi đã chạy vào vấn đề trong quá khứ với IE và css : bộ chọn di chuột sao cho phương pháp mà tôi đã thực hiện, là sử dụng chỉ thị tùy chỉnh.

.directive('hoverClass', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      hoverClass: '@' 
     }, 
     link: function (scope, element) { 
      element.on('mouseenter', function() { 
       element.addClass(scope.hoverClass); 
      }); 
      element.on('mouseleave', function() { 
       element.removeClass(scope.hoverClass); 
      }); 
     } 
    }; 
}) 

sau đó trên các yếu tố bản thân bạn có thể thêm các chỉ thị với tên lớp mà bạn muốn kích hoạt khi chuột là so với các yếu tố ví dụ:

<li data-ng-repeat="item in social" hover-class="hover tint" class="social-{{item.name}}" ng-mouseover="hoverItem(true);" ng-mouseout="hoverItem(false);" 
       index="{{$index}}"><i class="{{item.icon}}" 
       box="course-{{$index}}"></i></li> 

này nên thêm hover lớp và màu khi chuột vượt qua phần tử và không chạy nguy cơ va chạm tên biến số phạm vi. Tôi đã không kiểm tra nhưng MouseEnter và MouseLeave sự kiện nên vẫn bong bóng lên đến các yếu tố có chứa như vậy trong kịch bản đưa ra sau nên vẫn làm việc

<div hover-class="hover" data-courseoverview data-ng-repeat="course in courses | orderBy:sortOrder | filter:search" 
data-ng-controller ="CourseItemController" 
data-ng-class="{ selected: isSelected }"> 

cung cấp tất nhiên rằng li của những đứa trẻ Infact của div cha mẹ