jquery - 像 Firebug 一样检查 html 元素

Question

我正在尝试在 jquery 中制作元素检查器，我也差不多完成了，但它有时会起作用(无法正常工作)。我的代码--->

这里是 fiddle ---> http://jsfiddle.net/ashokdamani/01ntuu6e/

HTML--->

<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--->

    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 元素，而不是使用悬停事件函数。 这将解决您的棘手问题...!!