悬停上的 Jquery 字幕

Question

我用 jQuery 编写了一个简单的脚本，允许根据 .hover 触发器弹出和弹出标题。

问题是您必须将鼠标悬停在图像上，移回图像上，然后再次将鼠标悬停在图像上才能正常工作。 (你可以在这里明白我的意思 http://jsfiddle.net/sambeckhamdesign/bqjqb/ )

这是 (document).ready() 部分的问题还是 jQuery 本身的问题？我真的看不出这里的问题，看起来太简单了，不会搞砸哈​​哈。

jQuery(document).ready(function() {
$(".projectImages li").hover(

function() {
    $(this).find(".imageCaption").animate({
        opacity: "show",
        bottom: "0"
    }, "fast");
},

function() {
    $(this).find(".imageCaption").animate({
        opacity: "hide",
        bottom: "-50"
    }, "fast");
});
});

Answer 1

将图像标题类调整为 display:none;。更改它应该定义元素在第一次悬停时处于正确的状态。

.imageCaption{
    display:none;
    position:absolute;
    background:#f0f;
    bottom:-50px;
    width:100%;
    color:#fff;
}

由于元素的初始状态是阻止，因此鼠标输入从未被执行，因为它已经设置为阻止..

已更新jsfiddle