Question

我有一个链接。我希望当用户将鼠标悬停在链接上时，应该呈现一个包含所有<img>标记的页面，并将其显示在一个框中（工具提示类型）。我怎么能这样做？

提前致谢：）

Answer 1

看一下jquery tooltip。做你想要的非常简单和强大的方式。

Answer 2

你能告诉我们你的尝试吗？或者，你能描绘一些关于你的想象力捕获的更多细节吗？基本上，您希望在鼠标悬停时执行ajax调用，例如：

$(document).ready(function() {

    // when I mouseover an element with class="foo"
    $(".foo").mouseover(function() {

        // get me a reference to the next (hidden) div relative (or more precisely, sibling) to this element
        var $theDiv = $(this).next("div"); // or wherever it's at

        // using jQuery's $.data utility, I have stored the 'href' of the
        // page/view or whatever this mouseovered element points to.
        // the url parameter to load can optionally have a valid selector attached to it
        // to filter matching elements from the response
        $theDiv.load('linkToLoad.html' + '?dynamicImagePageThingieLink=' + $(this).data('link') + ' img', function() {

            // this will execute once the loading has finished
            alert('The next div has been filled up with image tags from linkToLoad.html');
            $theDiv.slideDown();
        });
    });
});

Answer 3

Qtip会很容易地做你想做的事，就像这样;

<div id="content">
    <a href="javascript:void(0);" rel="/images/image_one.jpg" class="">Image One</a>
    <a href="javascript:void(0);" rel="/images/image_two.jpg" class="">Image Two</a>
    <a href="javascript:void(0);" rel="/images/image_three.jpg" class="">Image Three</a>
</div>

<script type="text/javascript">

$(document).ready(function() 
{
    $('#content a[rel]').each(function()
    {
        $(this).qtip(
        {
            content: {  
                text: '<img class="throbber" src="/images/throbber.gif" alt="Loading..." />',
                url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
                title: {
                    button: 'Close' // Show a close link in the title
                }
             }
         })
     });
 });

 </script>

有很多选择;查看示例并查看代码。

当用户将鼠标悬停在链接上时，如何呈现和显示另一页？

3 个答案: