javascript - Angularjs Override ng-show ng-hide on :hover -

i have series of "icons" show in template.

<div ng-repeat="data in items | orderby:'-timestamp'">     <div class="icon">         <i>1</i>         <span>2</span>     </div> </div> 

i have following css show span when .icon hovered on , hide i.

.icon:hover { display: none; } .icon:hover span { display: block; } 

however, want able show every single instance of span when $scope.options == true. added following:

<i ng-hide="options">1</i> <span ng-show="options">2</span> 

but now, :hover broken , doesn't end showing span.

is there way override ng-show css still display:block when hovered?

plunker

you can skip css , let angular handle using ng-mouseenter/ng-mouseleave. use or have show when second variable goes true.

html:

<div ng-repeat="data in items | orderby:'-timestamp'">     <div ng-mouseenter="options=true" ng-mouseleave="options=false" class="icon">         <i ng-hide="options || checkbox">1</i>         <span ng-show="options || checkbox">2</span>     </div>  </div> <input type='checkbox' ng-model="checkbox" ng-click="options=!options">show