如何使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; 
} 

這是棘手！