title: Angularjs Override ng-show ng-hide on :hover
body: <p>I have a series of "icons" that I show in my template.</p>
  
  <pre><code>&lt;div ng-repeat="data in items | orderBy:'-timestamp'"&gt;
      &lt;div class="icon"&gt;
          &lt;i&gt;1&lt;/i&gt;
          &lt;span&gt;2&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the following css to show <code>span</code> when <code>.icon</code> is hovered over and hide <code>i</code>.</p>
  
  <pre><code>.icon:hover i { display: none; }
  .icon:hover span { display: block; }
  </code></pre>
  
  <p>However, I also want to be able to show every single instance of <code>span</code> when <code>$scope.options == true</code>. So I added the following:</p>
  
  <pre><code>&lt;i ng-hide="options"&gt;1&lt;/i&gt;
  &lt;span ng-show="options"&gt;2&lt;/span&gt;
  </code></pre>
  
  <p>But now, my <code>:hover</code> is broken and doesn't end up showing the <code>span</code>.</p>
  
  <p>Is there a way to override the <code>ng-show</code> so that my css will still <code>display:block</code> when it is hovered?</p>