如何使css双重悬停效果

Question

我想有双重悬停效果，但我不明白。 我想通过离开显示的图标来避免转换。

也许我在这里得到一些帮助。任何建议都是值得欢迎的。

这里是我的HTML：

http://jsfiddle.net/CB5Lr/

<div class="block image addMore" style="position: absolute; top: 100px; left: 50px; height: 350px;width:200px;background-color:red;"> 
    <span data-action="fullView" class="shopIcons full_screen_icon"></span> 
    <figure class="with-hidden-caption"> 
     please hover here. after a second a icon will apear in the right corner. 
     <br><br> 
     If you hover the icon it will change. Until here everything is OK.<br><br> 
     But, if you leave the icon, it shout show the old one without the rolling effekt. 
    </figure> 
</div> 

和CSS：

.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; 
} 

http://jsfiddle.net/CB5Lr/

Answer 1

嗯，我的第一个想法，用：后（或跨度内的另一个元素），因为在某种程度上，你需要添加其他元素与悬停玩>悬停：

http://jsfiddle.net/CB5Lr/7/

.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; 
} 

span.full_screen_icon:after { 
    content: ""; 
    display: none; 
    width: 45px; 
    height: 45px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: url("http://www.dasunddas.de/img/base/shop_icons.png?v=63") no-repeat scroll 0 -50px transparent; 
} 

span.full_screen_icon:hover:after { 
    display: block; 
} 

div.addMore:hover span.full_screen_icon { 
    opacity:1; 
    right: 0; 
    top: 0; 
} 

这是棘手！