"Unhover" CSS-animated DIV on iPhone

I have the following HTML:

                <div class="gallery" id="gallery-tl" title="<strong>My Title</strong>">
                    <div class="slides" id="slides-tl">
                        <img src="img/project-tl-01.png" alt="Shot">
                        <img src="img/project-tl-02.png" alt="Shot">
                        <img src="img/project-tl-03.png" alt="Shot">
                        <img src="img/project-tl-04.png" alt="Shot">
                        <img src="img/project-tl-05.png" alt="Shot">
                    </div>
                    <small class="next" id="next-tl">next image&hellip;</small>
                    <div class="gallery-nav clearfix">
                        <span class="launch">description</span>
    开发者_运维问答                    <ol class="" id="nav-tl"></ol>
                    </div>
                </div

which I would like to animate with the jQuery Cycle Plugin. The div.gallery is again a slide in another cycle gallery.

The small.next is the trigger for the next: parameter in Cycle and should be positioned absolutely over the img, faded in and out with CSS opacity on :hover.

Now with the iPhone, once touched, the :hover status won't go away so the images remain shaded.

Somebody been through this and knows what to do?

I haven't tried this but you could try to capture the touchend event and remove the hover state when it triggers like so

$("small.next").bind('touchend', function(event){
    $(this).removeClass('hover');
}