0

所以基本上，我正在使用 jquery 进行翻转。我有一个常规的 html 包装，里面有一个图像的缩略图。然后对于翻转，我动态附加一个 div（以便稍后为翻转设置动画）并在动态附加的 div 中，我希望 alt 文本在屏幕上显示为实际文本。在推出时，它会隐藏它。

这是基本的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>

这是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();
    });

​现在问题来了，问题是尽管一切正常，但在鼠标移出时有时会卡住。搞砸了我发现如果你像往常一样翻滚，将鼠标放在中间的文本上，水平滚动（左/右）附加的 div 不会隐藏自己。它只是停留在屏幕上。无论我做了什么，如果您将鼠标悬停在 div 的顶部或底部区域，它就会起作用，只要将鼠标悬停在文本所在的位置，它就会卡住。

这是一个 jsFiddle，所以你们都可以看到发生了什么。再次，将鼠标悬停在框上，您会在中间看到文本（由 alt 标签提供），将鼠标放在那里并水平滚动（左//右），看看它是如何停留在那里的。如果您然后将鼠标悬停在顶部/底部部分，那么它的行为就像正常一样。

在上面的 jQuery 选择器中，我把每个选择器都放在了那个盒子里，我首先尝试了它们，全部自己尝试，然后像上面一样一起尝试，我只是不明白这让我感到困惑。

这是 jsFiddle http://jsfiddle.net/somdow/KSt6a/

提前致谢。

​</p>

4

2 回答 2

2 
$('.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");
});

我不熟悉 mouseover 和 mouseleave 方法，但对于同样的情况，我使用 hover 和 in & out 的处理程序。

于 2012-09-13T02:00:30.723 回答
1

将复杂的代码简化为简单的 CSS:hover 语句？

http://jsfiddle.net/5jYem/

于 2012-09-13T02:08:50.507 回答