Question

I have been slaving over this for hours now. I need a lightbox to popup when I hover (not click) over a word in a paragraph. I have been trying different jquery plugins but none of them work unless I make the word a link and click it.

I have something like this

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

When I hover my mouse over the word “dog” a lightbox comes up and displays a picture of a dog in it until I leave the word. When I hover over “cow” a lightbox comes up with an image of a cow in it until I my mouse isnt on the word “cow” anymore.

Answer 1

This is sort of a hack but might be able to meet your needs.

given the following markup:

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

What we do is setup fancy box as normal.

$(".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();
});

Example on jsfiddle.