使用jQuery悬停在链接上

Question

我正在尝试为悬停时添加一个简单的jQuery slidedown函数。当我将操作附加到文档正文时，我可以让slidedown工作，但当我用作链接的图像附加时，它不工作。这里是为div设置的

jQuery(document).ready( function(){
jQuery('.desTitle').hide()
});
jQuery('#desGal').hover(function()
{
jQuery('.desTitle').slideDown('slow');
});

HTML是：

<div id="contain">
<div class="desTitle"><a href="link"><img src="imgTitle"></a></div>
<div id="desGal"><a href="link"><img src="img"></a></div>
</div>

我相信链接就是问题所在，但我不确定。是否可以在链接上创建jQuery悬停事件？

Answer 1

将悬停事件注册放在document.ready中。事件注册表可能在元素#desGal exists/document加载之前发生。

jQuery(document).ready(function () {
    jQuery('.desTitle').hide();

   jQuery('#desGal').hover(function () {
    jQuery('.desTitle').slideDown('slow');
});
});

您的意思是切换幻灯片然后使用slideToggle()吗

Answer 2

我使用下面的CSS隐藏了要在hover上显示的原始图片

CSS

.desTitle {
    display:none;
}

然后添加以下JavaScript代码，还管理悬停的out事件：

JavaScript/jQuery

jQuery('#desGal').hover(function () {
    jQuery('.desTitle').slideToggle('slow');
});

JSFiddle