diff --git a/angular-input-stars.css b/angular-input-stars.css
index b13c013..dbc17b9 100644
--- a/angular-input-stars.css
+++ b/angular-input-stars.css
@@ -25,4 +25,8 @@
color: #FDE35E;
text-shadow: black 0 0 1px, 0 0 1px ;
+}
+
+.angular-input-stars > li .active.angular-input-stars-hover {
+ text-shadow: black 0 0 3px;
}
\ No newline at end of file
diff --git a/angular-input-stars.js b/angular-input-stars.js
index 6d6aa3e..fb13348 100644
--- a/angular-input-stars.js
+++ b/angular-input-stars.js
@@ -7,7 +7,7 @@ angular.module('angular-input-stars', [])
restrict: 'EA',
replace: true,
template: '
' +
- '- ' +
+ '
- ' +
'' +
'
' +
'
',
@@ -25,6 +25,7 @@ angular.module('angular-input-stars', [])
scope.items = new Array(+attrs.max);
var emptyIcon = attrs.iconEmpty || 'fa-star-o';
+ var iconHover = attrs.iconHover || 'angular-input-stars-hover';
var fullIcon = attrs.iconFull || 'fa-star';
var iconBase = attrs.iconBase || 'fa fa-fw';
scope.listClass = attrs.listClass || 'angular-input-stars';
@@ -42,13 +43,13 @@ angular.module('angular-input-stars', [])
};
- scope.unpaintStars = function () {
+ scope.unpaintStars = function ($index, hover) {
- scope.paintStars(scope.last_value - 1);
+ scope.paintStars(scope.last_value - 1, hover);
};
- scope.paintStars = function ($index) {
+ scope.paintStars = function ($index, hover) {
//ignore painting, if readonly
if (scope.readonly) {
@@ -65,16 +66,20 @@ angular.module('angular-input-stars', [])
$star.removeClass(emptyIcon);
$star.addClass(fullIcon);
$star.addClass('active');
+ $star.addClass(iconHover);
} else {
$star.removeClass(fullIcon);
$star.removeClass('active');
+ $star.removeClass(iconHover);
$star.addClass(emptyIcon);
}
}
+ !hover && items.removeClass(iconHover);
+
};
scope.setValue = function (index, e) {
diff --git a/readme.md b/readme.md
index bb1cd57..5dc85b8 100644
--- a/readme.md
+++ b/readme.md
@@ -21,11 +21,11 @@ Inject it
```
-You can customize the **full**, **empty** and **base** icon classes via attributes
+You can customize the **base**, **empty**, **hover**, and **full** and icon classes via attributes
```html
-
+
```
-> Unlike icon-base, on icon-full and icon-empty you must specify only one class, but that is all you need : ]
+> Unlike icon-base, on icon-full, icon-hover and icon-empty you must specify only one class, but that is all you need : ]
You can customize the **list class** to whatever you want
```html