2011-03-10 72 views
1

我一直在为此花费数小时。当我将一个段落中的单词悬停(而不是单击)时,我需要一个lightbox来弹出。我一直在尝试不同的jQuery插件,但没有一个工作,除非我让这个词成为一个链接并点击它。悬停不点击,并有一个灯箱出现在其中的图像

我有这样的事情

<p>I am a yellow dog, drinking a spotted cow.<p> 

当我将鼠标悬停我的鼠标在“狗”字灯箱出现,直到我离开这个词显示它狗的照片。当我将鼠标悬停在“牛”上时,一个灯箱会显示一头牛的图像,直到我的鼠标不再是“牛”字为止。

回答

3

这是一种破解,但可能能够满足您的需求。

给出以下标记:

<p>I am a yellow <span class="test">dog</span>, drinking a spotted cow.<p> 

我们做的是建立看中箱是正常的。

$(".test").fancybox({ 
    href: "http://" 
}); 

$(".test").hover(function() { 
    $(this).click(); 
    $("#fancybox-overlay").remove(); //remove the overlay so you can close when hover off. 
}, function() { 
    $.fancybox.close(); 
}); 

jsfiddle上的示例。

+0

当我悬停在jsfiddle链接狗没有发生什么 – 2011-03-10 02:27:32

+0

我更新了小提琴,我的js的热链接被阻止。 – 2011-03-10 02:40:05

+0

你从哪里得到的CSS文件正在使用jsfiddle的图像? – 2011-03-10 15:32:05

0

这是我刚才做的事情。请注意左侧的JavaScript资源。

http://jsfiddle.net/shrage/N8dKW/

当你将鼠标悬停在链接上它可以使一个非同步电话会议到发布服务器的一些内容,这将填补这一内容的灯箱。 当你移出链接“AND”时,它会消失。

当您在包装盒内“点击”时,它将保持可见状态,直到您“在包装盒外点击”为止。

相关问题