CODEWITHSUNDEEP
javascriptjqueryhtmlcss
hamburger
hamburger

Reputation: 1435

how to make a double hover effect with css

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.

Maybe I get some help here. Any suggestion is welcome.

Here is my 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>

and the 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/

Upvotes: 2

Views: 4723

Answers (1)

coma
coma

Reputation: 16659

Well, my first idea, use :after (or another element inside the span) because somehow you need to add another element to play with the hover > hover:

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

This is tricky!

Upvotes: 1

Related Questions