jquery滚动/目标/选择器问题

因此，基本上，我正在使用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>

2882胶片

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

$（“#portSecW div:not（“.closeXbtn”））。前置（“”）；
$（'.portThumbsL、.portThumbsR、.portSecRollOver、.portSecInner、h3'）.mouseover（函数（）{
//$（this.css（“背景色”，“#0099FF”）；//暴徒的蓝色背景
$（this）.children（'.portSecRollOver'）.css（“显示”、“块”）；
//$（this.children（'.portSecRollOver'）.show（）；
$（this.find（'.portseciner'）.html（“+$（this.find（'img'））.attr（“alt”）+”）；
});
////    
$（'.portThumbsL，.portThumbsR'）.mouseleave（函数（）{
//css（“背景色”，“#333”）；
$（this）.children（'.portSecRollOver'）.css（“display”，“none”）；
//$（this.children（'.portSecRollOver'）.hide（）；
});

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

这里有一个jsFiddle，这样你们都可以看到发生了什么。再次，将鼠标移到框上方，您将看到中间的文本（由alt标记输入），将鼠标放在那里，水平滚动（左/右），然后查看它是如何保持在那里的。如果将鼠标悬停在顶部/底部零件上，则其行为与正常情况类似

在上面的jQuery选择器中，我将每个选择器都放在那个框中，我首先尝试了它们，全部由它们自己完成，然后像我上面所做的那样全部组合在一起，我只是不明白这会把我搞砸

这是jsFiddle

提前谢谢

​

$（'.portThumbsL'）.hover（函数（）{
$（this）.children（'.portSecRollOver'）.css（“显示”、“块”）；
$（this.find（'.portseciner'）.html（“+$（this.find（'img'））.attr（'alt'）+”）；
}，函数（）{
$（this）.children（'.portSecRollOver'）.css（“display”，“none”）；
});

我不熟悉mouseover和mouseleave方法，但在相同的情况下，我将hover与处理程序in和out一起使用。

$（'.portThumbsL'）。hover（function（）{
$（this）.children（'.portSecRollOver'）.css（“显示”、“块”）；
$（this.find（'.portseciner'）.html（“+$（this.find（'img'））.attr（'alt'）+”）；
}，函数（）{
$（this）.children（'.portSecRollOver'）.css（“display”，“none”）；
});

---

我不熟悉mouseover和mouseleave方法，但在同样的情况下，我使用hover处理函数in和out。

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

---

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

---

我解决了一个类似的问题，用hover代替了mousein和mouseoutYep。这已经不是我第一次遇到这样的问题了……你知道为什么吗？ThanksI用hover代替mousein和mouseoutYep解决了类似的问题。这已经不是我第一次遇到这样的问题了……你知道为什么吗？谢谢

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