-1

I have an image gallery on my page. There is an image and gallery navigation: next and previous buttons. By default the navigation is hidden, but when mouse cursor is over the right half of the image, next button is visible (:hover css selector). next button causes the animation, which involves navigation buttons. The problem is that right half of the image is not hovered after the end of the animation. I have to perform any mouse action to make next button visible. So here is my qustion: is there any way to "trigger" :hover selector after the end of the animation?

Note: I suppose I can resolve this issue using jQuery $(...).hover(in, out) but I'm wondering if there is more fundamental solution that can affect :hover. After all, this selector is far more convenient for thit purpose.

Improve this question
7
  • 1
    Post your code please. Commented Oct 18, 2013 at 13:32
  • duplication ? stackoverflow.com/questions/11074815/… Commented Oct 18, 2013 at 13:34
  • Are you looking for this? Commented Oct 18, 2013 at 13:35
  • I use Fancybox (v.2) jQuery plugin. It destroys navigation at the begining of the animation and creates it at the end. Commented Oct 18, 2013 at 13:37
  • 3
    Please note that hover pseudo-event is deprecated and removed in jQuery 1.9 and up: jquery.com/upgrade-guide/1.9/#hover-pseudo-event Commented Oct 18, 2013 at 13:39

1 Answer 1

Reset to default
2

After a few hours of fiddling and a little help from some friends I was able to come up with a better solution than before. The approach involves using a transparent element before the hovered element which expands from width:0px; height:0px; to width:10000px; height:10000px; and fires the same hover event as the gallery to display the next element. Using this approach, next is displayed no matter where the mouse is on the page, but only after the animation completes.

Updated Demo Here

body { overflow:hidden; }
#hoverHelper {
    width:0px;
    height:0px;
    z-index:1;
    position:absolute;
    margin-top:-1000px;
    margin-left:-1000px;
    animation: hhAnimation .001s 3s forwards;
}
#actualHover {
    width:50px;
    height:50px;
    background:teal;
    animation: yourAnimation 3s linear forwards;
}
#next {
    z-index:2;
    position:relative;
    display: none;
}
#actualHover:hover ~ #next, #hoverHelper:hover ~ #next, #next:hover {
    display:inline-block;
}
@keyframes yourAnimation {
    0% { background:teal; }
    100% { background: red; }
}
@keyframes hhAnimation {
    0% { width:0px;
         height:0px;
}
100% { width:10000px;
       height:10000px;
     }
}

And the HTML (just make sure #next is after the others)

<div id='actualHover'></div>
<div id='hoverHelper'></div>
<a id='next'>Next</a>

I also added a little javascript to allow it to repeat and show you how it could be accessed

The solution should be fully cross-browser. The only negative thing about it is the overflow:hidden on the body which could be optimized further by either using javascript to determine the current window height/width and setting it to that (including on resize) or something similar

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Unfortunately, this didn't work. I ran your demo, put cursor over the hidden "Next" and after the end of the animation "Next" didn't appear. I had to move mouse a little to see it.
You're correct, this will only fire in the case that the mouse moves again which in my opinion is acceptable if you don't want to use javascript like you know how to. Users move their mouse whenever they want to navigate anyway
But I liked the way you made your animation :) Is it cross-browser?
I'll add the other browser prefixes to make it so. One minute
You're right but in the case of the image gallery user may want to click "Next" several times and he doesn't expect navigation to be disappeared while he's doing it
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.