jQuery：在鼠标光标下突出显示元素？

Possible Duplicate:
07000

我正在尝试在jQuery中创建一个“元素选择器”，就像Firebug一样。基本上，我想突出显示用户鼠标下方的元素。这是我到目前为止，但它不能很好地工作：

$('*').mouSEOver(function (event) {
    var $this = $(this);
    $div.offset($this.offset()).width($this.width()).height($this.height());
    return false;
});


var $div = $('<div>')
    .css({ 'background-color': 'rgba(255,.5)','position': 'absolute','z-index': '65535' })
    .appendTo('body');

基本上，我将一个div注入到具有半透明背景的DOM中。然后我听每个元素上的mouSEOver事件，然后移动div，使其覆盖该元素。

现在，只要将鼠标移到页面上，这只会使整个页面变红。如何让这个工作更好？

编辑：相当确定的问题是，一旦我的鼠标触摸页面，身体被选中，然后当我移动我的鼠标，没有一个时刻通过超高分子，因为它的一切。

萤火

挖掘Firebug源代码，我发现这个：

drawBoxModel: function(el)
{
    // avoid error when the element is not attached a document
    if (!el || !el.parentNode)
        return;

    var Box = Firebug.browser.getElementBox(el);

    var windowSize = Firebug.browser.getwindowSize();
    var scrollPosition = Firebug.browser.getwindowScrollPosition();

    // element may be occluded by the chrome,when in frame mode
    var offsetHeight = Firebug.chrome.type == "frame" ? FirebugChrome.height : 0;

    // if element Box is not inside the viewport,don't draw the Box model
    if (Box.top > scrollPosition.top + windowSize.height - offsetHeight ||
        Box.left > scrollPosition.left + windowSize.width ||
        scrollPosition.top > Box.top + Box.height ||
        scrollPosition.left > Box.left + Box.width )
        return;

    var top = Box.top;
    var left = Box.left;
    var height = Box.height;
    var width = Box.width;

    var margin = Firebug.browser.getMeasurementBox(el,"margin");
    var padding = Firebug.browser.getMeasurementBox(el,"padding");
    var border = Firebug.browser.getMeasurementBox(el,"border");

    BoxModelStyle.top = top - margin.top + "px";
    BoxModelStyle.left = left - margin.left + "px";
    BoxModelStyle.height = height + margin.top + margin.bottom + "px";
    BoxModelStyle.width = width + margin.left + margin.right + "px";

    BoxBorderStyle.top = margin.top + "px";
    BoxBorderStyle.left = margin.left + "px";
    BoxBorderStyle.height = height + "px";
    BoxBorderStyle.width = width + "px";

    BoxPaddingStyle.top = margin.top + border.top + "px";
    BoxPaddingStyle.left = margin.left + border.left + "px";
    BoxPaddingStyle.height = height - border.top - border.bottom + "px";
    BoxPaddingStyle.width = width - border.left - border.right + "px";

    BoxContentStyle.top = margin.top + border.top + padding.top + "px";
    BoxContentStyle.left = margin.left + border.left + padding.left + "px";
    BoxContentStyle.height = height - border.top - padding.top - padding.bottom - border.bottom + "px";
    BoxContentStyle.width = width - border.left - padding.left - padding.right - border.right + "px";

    if (!BoxModelVisible) this.showBoxModel();
},hideBoxModel: function()
{
    if (!BoxModelVisible) return;

    offlineFragment.appendChild(BoxModel);
    BoxModelVisible = false;
},showBoxModel: function()
{
    if (BoxModelVisible) return;

    if (outlineVisible) this.hideOutline();

    Firebug.browser.document.getElementsByTagName("body")[0].appendChild(BoxModel);
    BoxModelVisible = true;
}

看起来他们正在使用一个标准的div css来绘制它…..只需要弄清楚他们如何处理事件现在…(这个文件是28K行长)

还有这个代码段，我猜可以检索适当的对象….虽然我不知道如何。他们正在寻找一个类“objectLink-element”…我不知道这个“repObject”是什么。

onMouseMove: function(event)
{
    var target = event.srcElement || event.target;

    var object = getAncestorByClass(target,"objectLink-element");
    object = object ? object.repObject : null;

    if(object && instanceOf(object,"Element") && object.nodeType == 1)
    {
        if(object != lastHighlightedobject)
        {
            Firebug.Inspector.drawBoxModel(object);
            object = lastHighlightedobject;
        }
    }
    else
        Firebug.Inspector.hideBoxModel();

},

我在想，也许当这个荧光笔节点的mousemove或mouSEOver事件触发时，我可以通过它呢？也许节点它的覆盖…？

如果我将一个不可见的元素放在比我的荧光笔更高的z指数的每个元素上方，但是给我的荧光笔比实际元素更高的z-index …理论上应该是有效的。不可见的元素会跳过鼠标事件，但突出显示的效果仍将看起来像其实际元素的顶点。

这意味着我已经将DOM元素翻了一番，定位必须正确。除非我只能“提升”荧光笔目前涵盖的元素？但是这仍然可以是每个元素>。<谁来帮帮我！

解决方法

所有这些答案都太复杂了…简单的解决方案：

使用Javascript：

prevElement = null;
document.addEventListener('mousemove',function(e){
        var elem = e.target || e.srcElement;
        if (prevElement!= null) {prevElement.classList.remove("mouSEOn");}
        elem.classList.add("mouSEOn");
        prevElement = elem;
    },true);

CSS：

.mouSEOn{
  background-color: #bcd5eb !important;
  outline: 2px solid #5166bb !important;
}

原文地址：https://www.jb51.cc/jquery/182473.html

jQuery：在鼠标光标下突出显示元素？

解决方法

相关推荐