Question

So basically, im working in a rollover with jquery. i have regular html wrap for a thumbnail with an image inside it. Then for the rollover i dynamically append a div(to animate the rollover later) and within that dynamically appended div, i want the alt text to appear as actual text on the screen. On rollout, it hides it.

here is the basic html

<div id="portSecW">

                <div class="portThumbsL">
                     <a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/2882.png" alt="2882films"/></a>
                    <div class="thumbTxtSmall">2882FILMS</div>
                </div>

    </div>

and here is the javascript

$('#portSecW div:not(".closeXbtn")').prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');


    $('.portThumbsL , .portThumbsR, .portSecRollOver, .portSecInner, h3').mouseover(function(){
        //$(this).css("background-color","#0099FF");//blue bg for thumgs
        $(this).children('.portSecRollOver').css("display","block");
        //$(this).children('.portSecRollOver').show();
        $(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");

    });
////    
    $('.portThumbsL , .portThumbsR').mouseleave(function(){
        //$(this).css("background-color","#333");
        $(this).children('.portSecRollOver').css("display","none");
        //$(this).children('.portSecRollOver').hide();
    });

​Now here is the problem, The problem is that although everything is working, on mouseout it sometimes gets stuck. messing about i found that if you roll over like normal, put the mouse on the text in the middle, and horizontally rollout(left/right) the appended div doesnt hide itself. It just stays on the screen. No matter what ive done, if you mouse over on the top side of the div or the bottom areas, it works, as soon as you mouse over where the text is, it gets stuck.

Heres a jsFiddle so you all can see whats going on. Again, mouseover the box and youll see text in the middle(fed by the alt tag), put the mouse there and roll out horizontally(left//right) and see how it just stays there. If you then mouse over it on the top/bottom parts then it behaves like normal.

In the above jQuery selectors, ive put EVERY selector within that box and ive tried them firstly, all by themselves, then all together as i have above and i just dont get thats messing me up.

Heres the the jsFiddle
http://jsfiddle.net/somdow/KSt6a/

Thanks in advanced.

​

Answer 1

$('.portThumbsL').hover(function(){        
    $(this).children('.portSecRollOver').css("display","block");
    $(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr('alt') + "</h3>");
}, function() {
    $(this).children('.portSecRollOver').css("display","none");
});

im not familiar with mouseover and mouseleave method, but for the same situation i use hover with the both handler in & out.