当前位置： 文江博客话题详情

JQuery - 在 mouseenter 上显示 div

发布于 2024-11-17 14:59:14 字数 6757 浏览 3 评论 0原文

我创建了以下 HTML。黄色框包含图像缩略图。当我将鼠标悬停在缩略图上时，它会在缩略图顶部显示一个视图链接。

但如果我快速移动鼠标，链接 div 就会闪烁。

这是代码 - 您可以将其复制并粘贴为 html 并进行测试。

<html>
<head>
    <title>Image Gallery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('.divImage').mouseenter(function () {
                var vl = $('#viewlink');
                var vlpos = $(this).position();
                vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' });
                vl.fadeTo('1', 0.5);
                vl.css('display', 'block');
            });

            $('.divImage').mouseleave(function (event) {
                if (event.toElement.id != 'viewlink') {
                    var vl = $('#viewlink');
                    vl.fadeTo('1', 0.0, function () {
                        vl.css('display', 'block');
                    });
                }
            });

            $('#viewlink').mouseleave(function (event) {
                $(this).fadeTo('1', 0.0, function () {
                    $(this).css('display', 'block');
                });

            });
        });        
    </script>
    <style type="text/css">
        .divImage
        {
            background-color: Yellow;
        }
    </style>
</head>
<body>
    <div id="viewlink" style="width: 100px; height: 30px; display: none; background-color: gray;
        text-align: center; line-height: 30px; vertical-align: middle; z-index: 1000;">
        <a href="Javscript:;" style="text-decoration: underline">View</a></div>
    <div style="width: 398px; height: 518px; border: 1px solid #DADADA; float: left;
        overflow-y: auto; overflow-x: hidden">
        <div style="width: 378px; height: 278px; margin: 10px; background-color: #FFFFFF">
            <table style="margin: 0px; padding: 0px; width: 100%;" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

FF 4.0 中也不会调用 mouseleave。有什么想法吗？

原文

I've created the following HTML. The yellow boxes contains image thumbnails. When I mouseover a thumbnail it show a view link on top of the thumbnail.

But if I move the mouse fast I'm getting the link div to flicker.

Here is the code - you can copy and paste it as html and test it.

<html>
<head>
    <title>Image Gallery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('.divImage').mouseenter(function () {
                var vl = $('#viewlink');
                var vlpos = $(this).position();
                vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' });
                vl.fadeTo('1', 0.5);
                vl.css('display', 'block');
            });

            $('.divImage').mouseleave(function (event) {
                if (event.toElement.id != 'viewlink') {
                    var vl = $('#viewlink');
                    vl.fadeTo('1', 0.0, function () {
                        vl.css('display', 'block');
                    });
                }
            });

            $('#viewlink').mouseleave(function (event) {
                $(this).fadeTo('1', 0.0, function () {
                    $(this).css('display', 'block');
                });

            });
        });        
    </script>
    <style type="text/css">
        .divImage
        {
            background-color: Yellow;
        }
    </style>
</head>
<body>
    <div id="viewlink" style="width: 100px; height: 30px; display: none; background-color: gray;
        text-align: center; line-height: 30px; vertical-align: middle; z-index: 1000;">
        <a href="Javscript:;" style="text-decoration: underline">View</a></div>
    <div style="width: 398px; height: 518px; border: 1px solid #DADADA; float: left;
        overflow-y: auto; overflow-x: hidden">
        <div style="width: 378px; height: 278px; margin: 10px; background-color: #FFFFFF">
            <table style="margin: 0px; padding: 0px; width: 100%;" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 20px;">
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                    <td align="center">
                        <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Also mouseleave is not getting called in FF 4.0. Any ideas?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

顾铮苏瑾 2024-11-24 14:59:14

我猜你遇到了动画队列中的堆积问题。通过在任何其他动画调用之前调用 stop() 来防止这种情况发生。

您编辑的代码（请注意在每个 fadeTo() 之前添加 stop()）：

$('.divImage').mouseenter(function () {
            var vl = $('#viewlink');
            var vlpos = $(this).position();
            vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' });
            vl.stop(true,true).fadeTo('1', 0.5);
            vl.css('display', 'block');
        });

        $('.divImage').mouseleave(function (event) {
            if (event.toElement.id != 'viewlink') {
                var vl = $('#viewlink');
                vl.stop(true,true).fadeTo('1', 0.0, function () {
                    vl.css('display', 'block');
                });
            }
        });

        $('#viewlink').mouseleave(function (event) {
            $(this).stop(true,true).fadeTo('1', 0.0, function () {
                $(this).css('display', 'block');
            });

});

I'm guessing that you're running into a buildup in the animation queue. Prevent this by calling stop() prior to any additional animation calls.

Your edited code (note the addition of stop() before each fadeTo()):

$('.divImage').mouseenter(function () {
            var vl = $('#viewlink');
            var vlpos = $(this).position();
            vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' });
            vl.stop(true,true).fadeTo('1', 0.5);
            vl.css('display', 'block');
        });

        $('.divImage').mouseleave(function (event) {
            if (event.toElement.id != 'viewlink') {
                var vl = $('#viewlink');
                vl.stop(true,true).fadeTo('1', 0.0, function () {
                    vl.css('display', 'block');
                });
            }
        });

        $('#viewlink').mouseleave(function (event) {
            $(this).stop(true,true).fadeTo('1', 0.0, function () {
                $(this).css('display', 'block');
            });

});
回复 原文
小傻瓜 2024-11-24 14:59:14

hover() 在没有闪烁的情况下效果更好。

$('.divImage').hover(enter, leave);

function enter() { // mouse enter
    var vl = $('#viewlink');
    var vlpos = $(this).position();
    vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' });
    vl.fadeTo('1', 0.5);
    vl.css('display', 'block');
};

function leave(event) { // mouse leave
if (event.toElement.id != 'viewlink') {
         var vl = $('#viewlink');
         vl.fadeTo('1', 0.0, function () {
         vl.css('display', 'block');
       });
    }
};

hover() works much better without the flicker.

$('.divImage').hover(enter, leave);

function enter() { // mouse enter
    var vl = $('#viewlink');
    var vlpos = $(this).position();
    vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' });
    vl.fadeTo('1', 0.5);
    vl.css('display', 'block');
};

function leave(event) { // mouse leave
if (event.toElement.id != 'viewlink') {
         var vl = $('#viewlink');
         vl.fadeTo('1', 0.0, function () {
         vl.css('display', 'block');
       });
    }
};
回复 原文
梦幻的味道 2024-11-24 14:59:14

您可以更改 css 属性“可见性”：
<代码>
$(".element").addClass("可见");

哪里
<代码>
.hidden { 可见性：隐藏； }
.visible { 可见性：可见； }

希望这有帮助！
NS

You could change the css attribute "visibility":

$(".element").addClass("visible");

where

.hidden { visibility: hidden; }
.visible { visibility: visible; }

Hope this helps!

NS

回复 原文
~没有更多了~

关于作者

孤云独去闲

暂无简介

0 文章
0 评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文