hoverEnabled not properly working

[sagacitysite]

I'm submitting a...

[X] Bug report
[ ] Feature request

There is a related issue: #38

Current behavior

Only in case 'hoverEnabled' is 'true':

• In Chromium: It works, but after hovering the stars, they change their color to default color (= grey).
• In Firefox: hover is not working at all

Expected behavior

• In Chromium: The current color (positive = green, ok = yellow, negative = green) should be maintained after hovering.
• In Firefox: It should do something ;)

Minimal reproduction of the problem with instructions

I've implemeted the star rating as follows:

<star-rating [starType]="'svg'" [showHalfStars]="true" [hoverEnabled]="true" [rating]="2.5" (ratingChange)="rate($event)"></star-rating>

Environment

Library version: 4.0.0-beta.3
Angular version: 5.2.0

Tested browsers:
- Chromium (desktop) version 65
- Firefox (desktop) version 59

[sagacitysite]

Regarding Firefox: There is a bug in Firefox, which was the reason that it did not work there.

See here: https://bugzilla.mozilla.org/show_bug.cgi?id=843003

I used the <star-rating> inside of <button>, which was the problem.

Now the 'grey-color'-problem is the same for both browsers: The color should be maintained after leaving the rating element.

[a-litsov]

Don't know why, but if I set attribute "staticColor" to some random string, problem with grey-color disappears. Like this:

<star-rating [starType]="'svg'" [rating]="4.63" staticColor="123" [hoverEnabled]="true"></star-rating>

Found this workaround while experimenting in Live Demo page: if we select 'none' color option in Styling category, the top star-rating component starts working properly.
P.S. Sorry for bad english.