Question

我创建了以下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。有什么想法吗？

Answer 1

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

您修改后的代码（请注意在每个stop()之前添加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');
            });

});

Answer 2

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');
       });
    }
};

Answer 3

您可以更改css属性“visibility”：
$(".element").addClass("visible");
其中
.hidden { visibility: hidden; } .visible { visibility: visible; }

希望这有帮助！
NS

JQuery - 在mouseenter上显示div

3 个答案: