Question

我正在尝试在jquery中创建元素检查器，我也差不多完成了，但它有效一段时间（没有正常工作）。我的代码---＆gt;

这里的小提琴---＆gt; http://jsfiddle.net/ashokdamani/01ntuu6e/

HTML ---＆GT;

<div class="contentContainer">
        <input class="inputText inputText1" name="myName" type="text" style="margin-left: 50px;" />
        <input class="inputText " name="myData" type="text" />
        <div class="focusable" style="border: 1px solid green; width: 200px; height: 250px; margin: 50px;"></div>
    </div>

的Jquery ---＆GT;

    var ad_focused;
        var $ad_focusedele;
        var ad_mousetop;
        var ad_mouseleft;

$('body').mousemove(function (eve) {
                ad_mousetop = eve.pageY;
                ad_mouseleft = eve.pageX;

                if (ad_focused) {
                    if (isUnHovered($ad_focusedele)) {
                        $(".hoverDark").remove();
                        $(".hoverLight").remove();
                        $ad_focusedele = null;
                        ad_focused = false;
                    }
                }
            });

            $eles = $('div, input, form').not('body > div, body > form, body > iframe');

            $eles.hover(function () {
                if (ad_focused)
                    return;

                ad_focused = true;
                $ad_focusedele = $(this);

                var ad_wr = '<div class="hoverDark"></div><div class="hoverLight"></div>';
                $(this).parent().append(ad_wr);

                var mleft = !isNull($(this).css('margin-left')) ? parseInt(($(this).css('margin-left')).replace('px', '')) : 0;
                var mright = !isNull($(this).css('margin-right')) ? parseInt(($(this).css('margin-right')).replace('px', '')) : 0;
                var mtop = !isNull($(this).css('margin-top')) ? parseInt(($(this).css('margin-top')).replace('px', '')) : 0;
                var mbottom = !isNull($(this).css('margin-bottom')) ? parseInt(($(this).css('margin-bottom')).replace('px', '')) : 0;

                var elemOuterWidth = $(this).outerWidth(true) - (mleft == 0 ? 0 : mleft - 5) - (mright == 0 ? 0 : mright - 5);
                var elemOuterHeight = $(this).outerHeight(true) - (mtop == 0 ? 0 : mtop - 5) - (mbottom == 0 ? 0 : mbottom - 5);
                var elemPos = $(this).position();
                var elemPosTop = elemPos.top - 1;
                var elemPosLeft = elemPos.left - 1;

                $(".hoverDark").css({
                    "width": elemOuterWidth,
                    "height": elemOuterHeight,
                    "top": elemPosTop + (mtop == 0 ? 0 : mtop - 5),
                    "left": elemPosLeft + (mleft == 0 ? 0 : mleft - 5)
                });

                $(".hoverLight").css({
                    "width": elemOuterWidth,
                    "height": elemOuterHeight,
                    "top": elemPosTop + (mtop == 0 ? 0 : mtop - 5),
                    "left": elemPosLeft + (mleft == 0 ? 0 : mleft - 5)
                });
                $(".hoverDark").stop(true, true).show();
                $(".hoverLight").stop(true, true).show();
            });

function isUnHovered(obj) {
            var eletop = $(obj).offset().top;
            var eleleft = $(obj).offset().left;
            var eleright = $(obj).offset().left + getCssValue($(obj).css('width'));
            var elebottom = $(obj).offset().top + getCssValue($(obj).css('height'));

            return !(ad_mouseleft > eleleft && ad_mouseleft < eleright && ad_mousetop > eletop && ad_mousetop < elebottom);
        }

        function getCssValue(val) {
            return parseInt(val.replace('px', ''));
        }

        function isNull(obj) {
            return obj == null || obj == undefined;
        }

我在悬停时将元素包裹起来，当鼠标没有移动时将其展开（即取消悬停，但不完全取消悬停，因为当它用一些div包裹它的循环时悬停事件）。

Answer 1

不使用悬停事件功能，最好使用jquery的 mouseenter 和 mouseleave 功能，以便更好地响应html元素。这将解决你棘手的问题...... !!

检查像firebug这样的html元素

1 个答案: