[jQuery] layering two images on top of each other in when using jQuery Cycle Plugin

[mangajin]

I have problem making my customize button on top of slide show
images.
The image that is placed on top of the slide image has absolute
position.
The images bellow are the sliding images which are also absolute
position.
I did set the button to have higher z-index however when I try to
click the image the browser can't recognize which one is now hovered.

I did the example so that anyone can understand my issue easily.
http://demo.joyobject.org/twoimages/twoimages.htm

The idea is that the button image will be shown only when there is a
mouse hover on top of the slide picture.

I do copy the code here:

STYLE
 .imageTop
    {
        width:108px;
        position:absolute;
        top:0;
        left:0;
        z-index:100;
        }
    .imageBellow
    {
        width:257px;
        position:absolute;
        top:0;
        left:0;
        z-index:1;
        }
JQUERY
 $(document).ready(function() {

     $('.imageBellow').cycle({
             fx: 'scrollLeft',
             next: '.next',
             timeout: 0
         });
         $('.imageBellow').hover(
                function() { $(".nextbtn").show(); },
                function() { $(".nextbtn").hide(); }
         );
     });

HTML
<div class="imageTop">
    <a class="next" href="#"><img class="nextbtn" alt="bigPic"
src="image/arrownext.png" /></a>
</div>
<div class="imageBellow">
    <img alt="buttonImage" src="image/biopack.jpg" />
    <img alt="buttonImage2" src="image/summerhouse.jpg" />
</div>