Question

我已经在这几个小时内一直在为此而苦恼。当我将（而不是单击）悬停在段落中的单词上时，我需要弹出一个灯箱。我一直在尝试不同的jquery插件，但除非我将单词设为链接并单击它，否则它们都不起作用。

我有类似的东西

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

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

Answer 1

这有点像黑客，但可能能满足你的需求。

给出以下标记：

<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上的示例。

Answer 2

这是我前一段时间做过的事情。请注意左侧的javascript资源。

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

当您将鼠标悬停在链接上时，它可以进行异步调用以启动服务器的某些内容，它将使用此内容填充灯箱。当您移出“AND”链接时，它将消失。

当您在框内“点击”它时，它将保持可见，直到您在框中“点击”。

不要点击鼠标悬停，然后出现一个带有图像的灯箱

2 个答案: