Javascript 如何使用css实现双悬停效果

我想有一个双悬停效果，但我没有得到它。 我想通过留下出现的图标来避免过渡

也许我能得到一些帮助。欢迎提出任何建议

这是我的HTML：

---

好吧，我的第一个想法是，在之后使用（或跨度内的另一个元素），因为您需要添加另一个元素来使用悬停>悬停：

---

这很棘手

你已经有了“双悬停”，有什么问题吗？你想用更少的标记吗？是的，我有一个双悬停。但离开第二次悬停会产生错误的效果。我想避免背景位置的转换。离开iconOh，它可以在没有过渡的情况下工作，现在我明白了，你应该把它添加到问题中。thx coma它看起来很好。现在不同的是，当我离开addMore地区时，它不再飞了。现在看起来真的很好。非常感谢，因为我永远都不会得到它。。。

<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>

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

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