title: how to make a double hover effect with css
body: <p>I would like to have a double hover effect but I do not get it.
  I would like to avoid the transition by leaving the appeared icon.</p>
  
  <p>Maybe I get some help here. Any suggestion is welcome.</p>
  
  <p>Here is my HTML:</p>
  
  <p><a href="http://jsfiddle.net/CB5Lr/" rel="nofollow">http://jsfiddle.net/CB5Lr/</a></p>
  
  <pre><code>&lt;div class="block image addMore" style="position: absolute; top: 100px; left: 50px; height: 350px;width:200px;background-color:red;"&gt;
      &lt;span data-action="fullView" class="shopIcons full_screen_icon"&gt;&lt;/span&gt;
      &lt;figure class="with-hidden-caption"&gt; 
          please hover here. after a second a icon will apear in the right corner.
          &lt;br&gt;&lt;br&gt;
          If you hover the icon it will change. Until here everything is OK.&lt;br&gt;&lt;br&gt;
          But, if you leave the icon, it shout show the old one without the rolling effekt.
      &lt;/figure&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>.shopIcons {
      background: url("http://www.dasunddas.de/img/base/shop_icons.png?v=63") no-repeat scroll 0 0 transparent; 
  }
  
  span.full_screen_icon {
      background-position: 0px 0px;
      cursor: pointer;
      opacity: 0;
      height: 45px;
      position: absolute;
      right: -45px;
      top: -45px;
      width: 45px;
      z-index: 10;
      transition-duration: .6s;
      transition-delay: 1s;
      /*    transition: all;   */
  }
  
  span.full_screen_icon:hover {
      background-position: 0px -50px;
      transition-delay: 0s;
      transition-duration: 0s;
  }
  
  div.addMore:hover span.full_screen_icon {
      opacity: 1;
      right: 0;
      top: 0;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/CB5Lr/" rel="nofollow">http://jsfiddle.net/CB5Lr/</a></p>