Angularjs Override ng-show ng-hide on :hover

Question

I have a series of "icons" that I show in my template.

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

I have the following css to show span when .icon is hovered over and hide i.

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

However, I also want to be able to show every single instance of span when $scope.options == true. So I added the following:

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

But now, my :hover is broken and doesn't end up showing the span.

Is there a way to override the ng-show so that my css will still display:block when it is hovered?

Answer 1

plunker

You can skip the css and let angular handle it using ng-mouseenter/ng-mouseleave. Then use an or to have it show when a 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