Question

我想有一个双悬停效果，但我不明白。我想通过留下出现的图标来避免过渡。

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

这是我的HTML：

<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

好吧，我的第一个想法是，使用：after （或跨度内的其他元素），因为不知何故你需要添加另一个元素来玩hover＆gt;悬停：

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

这很棘手！

如何用css制作双悬停效果

1 个答案: