CODEWITHSUNDEEP
angularjs
Adam
Adam

Reputation: 3665

AngularJS Conditionally Remove CSS Hover

Is there a way to remove the :hover from a css inline in angular without removing the whole class?

Like the following removes the whole class:

ng-class="{'option-selected' : option.chosen}"

But say option-selected had a option-selected:hover

Is there a way to remove :hover inline within the ng-class?

Upvotes: 2

Views: 2623

Answers (1)

Mathew Berg
Mathew Berg

Reputation: 28750

Attach the hover to another class that you can toggle.

Somethign like

ng-class="{'option-selected': option.chosen, 'option-hover': option.hover }

Then in your css for when setting up the hover you would have

.option-selected.option-hover:hover{
    ...
}

That way, the only way the hover will work is if both classes are on it.

Besides that, no there is no way to get around the hover from css unless you start dropping in !important's everywhere.

Upvotes: 5

Related Questions