jquery nivo 滑块标题

Question

我正在使用 Drupals Nivo Slider 模块，希望在鼠标悬停在滑块 div 上时标题向上滑动，并在鼠标离开 div 时消失。我已经弄清楚了，但我遇到的问题是模块中的 html 具有 display:block 的内联样式，它使标题出现，我不希望标题显示直到有人将鼠标悬停在它上面。现在我必须将鼠标悬停在它上面以摆脱 display:block ，然后由于我正在使用的 mouseleave 事件它可以工作。

奇怪的是直到第三张图片才出现问题，因为第一张图片没有标题，而第二张图片完全符合我的要求，直到有人鼠标悬停才显示标题。这是第三、第四和第五张图像在图像淡入时显示其标题。我尝试在我的 CSS 中添加 display:none !important ，这使得标题根本不出现。这是我的 jQuery，任何帮助将不胜感激，我很抱歉花了这么多文字来解释我的问题。

        $('.nivo-caption').css('display', '');

        $('#home_slider').hover(function(){
                $('.nivo-caption p').slideToggle('fast');
        }); 

        $('#home_slider').mouseleave(function(){
                $('.nivo-caption p').css("display", "none");
        });

Answer 1

这个怎么样？

    $('.nivo-caption').hide();

    $('#home_slider').hover(
        function(){
            $('.nivo-caption').show('fast');
        },
        function(){
            $('.nivo-caption').hide('fast');
        },
    );