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

Answer 2

尝试：

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


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

Answer 3

使用jQuery隐藏页面加载元素：

http://jsfiddle.net/FrelCee/bqjqb/33/

Hover上的Jquery标题

3 个答案: