检查像萤火虫一样的html元素

Question

i am trying to make element inspector in jquery, i also almost done, but it works some times (not properly working). my code --->

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

I am wrapping up the element when hover and unwrapping it when mouse not moving on it (ie unhover, but not exactly unhover ,because when it wrapped with some div its loops the hover event).

Answer 1

Instead of using hover event function it is always better to use jquery's mouseenter and mouseleave function for better response from html elements. This will solve your tricky problem...!!