Jquery 检查像firebug这样的html元素

我正在尝试在jquery中创建元素检查器，我也几乎完成了，但它有时可以工作（不能正常工作）。我的代码-->

这里是小提琴-->

Html--->

Jquery--->

var-ad_-focused；
var$ad_focusedele；
var ad_mousetop；
var ad_mouseleft；
$（'body'）.mousemove（函数（eve）{
ad_mousetop=eve.pageY；
ad_mouseleft=eve.pageX；
如果（以广告为重点）{
如果（未被发现（$ad_focusedele））{
$（“.hoverDark”）.remove（）；
$（“.hoverLight”）.remove（）；
$ad_focusedele=null；
广告聚焦=假；
}
}
});
$eles=$（'div，input，form'）。而不是（'body>div，body>form，body>iframe'）；
$eles.hover（函数（）{
如果（以广告为重点）
回来
专注于广告=真实；
$ad_focusedele=$（此项）；
var ad_wr=“”；
$（this.parent（）.append（ad_wr）；
var mleft=！isNull（$（this）.css（$（this.css（$（margin-left）））？parseInt（$（this.css（$（margin-left）））。replace（$（px'），''）：0；
var mright=！isNull（$（this.css（$（this.css（$（margin-right）））？parseInt（$（this.css（$（margin-right）））。replace（$（px'），''）：0；
var mtop=！isNull（$（this.css（$（this.css（$margin-top））？parseInt（$（this.css（$margin-top）））。replace（$（px'，''）：0；
var mbottom=！isNull（$（this）.css（$（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）-（MBOTOM==0？0:MBOTOM-5）；
var elemPos=$（this.position（）；
var elemPosTop=elemPos.top-1；
var elemPosLeft=elemPos.left-1；
$（“.hoverDark”）.css({
“宽度”：电气宽度，
“高度”：电气高度，
“顶部”：elemPosTop+（mtop==0？0:mtop-5），
“左”：elemPosLeft+（mleft==0？0:mleft-5）
});
$（“.hoverLight”）.css({
“宽度”：电气宽度，
“高度”：电气高度，
“顶部”：elemPosTop+（mtop==0？0:mtop-5），
“左”：elemPosLeft+（mleft==0？0:mleft-5）
});
$（“.hoverDark”）.stop（true，true.show（）；
$（“.hoverLight”）.stop（true，true.show（）；
});
功能未被覆盖（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'））；
返回！（ad_mouseleft>eleleft&&ad_mouselefteletop&&ad_mousetop

---

当鼠标悬停在元素上时，我将其包裹，当鼠标不在其上移动时，我将其展开（即取消包裹，但不完全取消包裹，因为当它使用一些div进行包裹时，它将循环悬停事件）.

为了更好地响应html元素，最好使用jquery的mouseenter和mouseleave函数，而不是使用悬停事件函数。

---

这将解决您棘手的问题

你的问题是什么？看小提琴，它不能正常工作。你能修复它吗？

不能正常工作意味着什么？您的代码中一定有某些特定部分不正确。这里有一个插件，你想用它做什么我可以用上面的js（github）来制作我自己的插件吗？
<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>

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