CODEWITHSUNDEEP
javascripthtmlangularjs
Kiwi
Kiwi

Reputation: 2773

Visibility div via 2 variables, different on / off

I'm probably not fully awake so overseeing the obvious is possible. But I have 2 variables that decide if a div has a specific class or not.

The class is more acting like a toggle; so the following should happen to trigger the value:

focus            => on
!focus && !hover => off

So when the focus var turns on the class should be added, and when the focus is lost and the hover is off it should be removed.

I would preferably do it inline on the following place:

<div ng-class="{'visible' : --FORMULA-- }"> </div>

Here you should only see the "WOhooooo" once you've clicked the input box, and then it should only dissapear when you leave the grey box: http://codepen.io/cskiwi/pen/MKYNqo

Upvotes: 0

Views: 29

Answers (1)

Yasser Shaikh
Yasser Shaikh

Reputation: 47774

You seem to already know the syntax, dont know what did you try. This should work...

<div ng-class="{'visible' : 'focus', 'notvisible' : '!focus && !hover' }"> </div>

Upvotes: 1

Related Questions