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

可能重复：

我正试图在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,0,0,.5)', 'position': 'absolute', 'z-index': '65535' })
    .appendTo('body');

看起来他们正在使用标准的div+css来绘制它。。。。。只是要弄清楚他们现在是如何处理这些事件的。。。（此文件的长度为28K行）

还有这个片段，我猜它检索到了合适的对象。。。。虽然我不知道怎么做。他们正在寻找一个类“objectLink元素”。。。我不知道这个“重新对象”是什么

---

我在想，也许当highlighter节点触发mousemove或mouseover事件时，我可以通过某种方式传递它？也许是为了让它覆盖

---

如果我把一个不可见的元素放在每个元素上面，z指数比荧光笔高，但给荧光笔一个比实际元素高的z指数。。。理论上，它应该是有效的。不可见的元素将触发鼠标事件，但高光效果看起来仍然像实际元素的叠加

---

这意味着我刚刚将DOM元素增加了一倍，而且位置必须正确。除非我只“提升”荧光灯当前覆盖的元素？？但这仍然可能是每个元素><有人帮帮我

当您将鼠标移到上方时，整个页面就会变红的原因是您的代码与

body

元素的

mouseover

事件相匹配。您可以通过只选择

body

的子项来阻止这种情况的发生

$('body *').bind( //...

在一个包含大量元素的页面上，您会遇到性能问题，尽管bind会为每个匹配的元素附加一个侦听器。试着看看jQuery的事件委派api（

.delegate（）

），它允许您侦听传播到根元素的事件，也适用于鼠标事件。

不那么烦躁，但是，如果不先将鼠标完全移出父元素，它就无法检测到从父元素移动到其子元素之一

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

var $highlit;

$('*').live('mousemove', function(event) {
    if (this.nodeName === 'HTML' || this.nodeName === 'BODY')
    {
        $div.hide();
        return false;
    }
    var $this = this.id === 'highligher' ? $highlit : $(this),

        x = event.pageX,
        y = event.pageY,

        width = $this.width(),
        height = $this.height(),
        offset = $this.offset(),

        minX = offset.left,
        minY = offset.top,
        maxX = minX + width,
        maxY = minY + height;

    if (this.id === 'highlighter')
    {
        if (minX <= x && x <= maxX
            && minY <= y && y <= maxY)
        {
            // nada
        }
        else
        {
            $div.hide();
        }
    }
    else
    {
        $highlit = $this;
        $div.offset(offset).width($this.width()).height($this.height()).show();
    }
    return false;
});

var$div=$（''）.css({
“背景色”：“rgba（255,0,0,5）”，
'位置'：'绝对'，
“z索引”：“65535”
}).hide（）.prependTo（'body'）；
var$highlight；
$（'*'）.live（'mousemove'，函数（事件）{
if（this.nodeName=='HTML'| | this.nodeName==='BODY'）
{
$div.hide（）；
返回false；
}
var$this=this.id=='highligher'？$highlight:$（this），
x=event.pageX，
y=event.pageY，
宽度=$this.width（），
高度=$this.height（），
偏移量=$this.offset（），
minX=offset.left，
minY=offset.top，
最大值=最小值+宽度，
最大值=最小值+高度；
如果（this.id==='highlighter'）
{
如果（minX），我可以建议一种替代方法吗

只需为页面的所有子元素指定一个
背景色
，然后在
hover（）
上调整该元素的
背景色
，以增加其对比度，怎么样

$('html').children().css('background-color','rgba(0,0,0,0.2)');
$('body').children().hover(
    function(){
        $(this).css('background-color','#fff');
    },
    function(){
        $(this).css('background-color','rgba(0,0,0,0.2)');
    });

.
修改David的答案，使其正确还原词尾的背景色

$('body *').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        $(this).data('bgcolor', $(this).css('background-color'));
        $(this).css('background-color','rgba(255,0,0,.5)');
    } else {
        $(this).css('background-color', $(this).data('bgcolor'));
    }
    return false;
});

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

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:

当你尝试做这样的事情时，有一个令人讨厌的第二十二条军规。基本上，当你在鼠标下画东西时，由于鼠标悬停在一个元素上，鼠标实际上离开了原来的元素，现在又悬停在新的元素上。@Matt:那么我们怎么解决这个问题呢？Firebug不是操纵DOM来渲染这些东西吗框，还是它有自己的渲染引擎？当您在Firebug中鼠标悬停在网页中的元素上时，Firebug会高亮显示这些元素-这是独立的。或者，当您使用“单击以检查”时，您会想到这一点吗它只概括了元素，这可能是问题的关键-Firebug可以绘制4个独立的元素，每个元素对应于框的每一个边缘，在这种情况下，我提到的catch-22根本不是问题。+1用于挖掘Firebug源代码-我打算提出这个建议。这并不能真正解决问题（使用
body*
），这只是将问题转移到了一个更深层的元素上。请看Matt的评论。现在还不太担心性能，我会选择任何有效的。另外，我不使用live（）或delegate（）的原因是因为这样会包含将来的元素…也就是说，我不希望它开始选择自己（这就是我在绑定事件后附加它的原因）。您是否尝试检查传递给回调函数的currentTarget的事件对象？如果currentTarget是突出显示的div，则您可以什么都不做。如果我什么都不做，它仍然会阻止实际元素接收事件。（但是是的，这将允许我使用
live（）
…只要我能解决其他问题）到达那里…仍然需要一些工作。我会看看我能做些什么。这是可能的。如果我找不到解决方案，我可能不得不采用这种方法，但这真的让我感到困扰，因为我知道必须有办法做到这一点。
$('body *').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        $(this).data('bgcolor', $(this).css('background-color'));
        $(this).css('background-color','rgba(255,0,0,.5)');
    } else {
        $(this).css('background-color', $(this).data('bgcolor'));
    }
    return false;
});

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

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