我正在使用 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");
});