类似firebug的jquery实现

我想在光标悬停在元素上时实现类似firebug的高亮显示

$("*").mouseover(function()
{
    $(this).css({border:'1px solid blue'});
})
.mouseleave(function() 
{
    $(this).css({border: ''});
});

---

但是，当光标悬停在内部元素上时，它不会更改css，外部元素的样式仍然会更改，而不会由于mouseleave而恢复到其原始css

*:hover {
     border: 1px solid blue;
} 

在CSS规则中，而不是依赖Javascript

---

更新。我刚试过，似乎效果不错。

你能做点类似的事情吗

*:hover {
     border: 1px solid blue;
} 

在CSS规则中，而不是依赖Javascript

---

更新。我只是尝试了一下，它似乎运行得相当好。

像Noufal一样，我的第一个想法是最好使用CSS的：hover伪类，除非你必须支持IE6，IE6不支持：hover，除了在链接上，但我无法立即想到你将如何处理确保祖先元素也没有边界。在我看来，所有祖先的边界都很丑陋：

对于JavaScript解决方案：您很接近，但通常使用mouseover和mouseout，或者使用mouseenter和mouseleave，但通常不使用mouseover和mouseleave；有些地方你会喜欢

在本例中，我可能会使用mouseover和mouseout，但只对所讨论的元素实际触发的事件进行操作，而不是冒泡事件：

$("*").mouseover(function(event)
{
  if (this === event.target) {
    $(this).css({border:'1px solid blue'});
  }
})
.mouseout(function(event) 
{
  if (this === event.target) {
    $(this).css({border:''});
  }
});

注意使用以确保我们没有处理冒泡事件

或者，与其将处理程序连接到页面上的每个元素，不如将处理程序仅连接到body元素，并利用它们冒泡的事实，使用：

---

或者你可以使用live，这在很大程度上是一样的。

像Noufal一样，我的第一个想法是最好使用CSS的：hover伪类，除非你必须支持IE6，IE6不支持：hover，除了在链接上，但我不能立即想到你将如何确保祖先元素没有边界。在我看来，所有祖先的边界都很丑陋：

对于JavaScript解决方案：您很接近，但通常使用mouseover和mouseout，或者使用mouseenter和mouseleave，但通常不使用mouseover和mouseleave；有些地方你会喜欢

在本例中，我可能会使用mouseover和mouseout，但只对所讨论的元素实际触发的事件进行操作，而不是冒泡事件：

$("*").mouseover(function(event)
{
  if (this === event.target) {
    $(this).css({border:'1px solid blue'});
  }
})
.mouseout(function(event) 
{
  if (this === event.target) {
    $(this).css({border:''});
  }
});

注意使用以确保我们没有处理冒泡事件

或者，与其将处理程序连接到页面上的每个元素，不如将处理程序仅连接到body元素，并利用它们冒泡的事实，使用：

---

或者你可以使用live，这基本上是一样的。

不要在*上做这么重的事情。改用

我还没有测试它，但我的重点是使用.delegate

---

编辑Crowder添加的建议，谢谢

不要在*上做这么重的事情。改用

我还没有测试它，但我的重点是使用.delegate

---

编辑Crowder添加的建议，谢谢

从未想过这一点，但这能解决不包括悬停的父元素的问题吗？我的意思是，如果我转到一个内部元素，那么焦点将放在内部元素上，而不是父元素上，因此不会更改其cssWell，父元素也会高亮显示，但您可能会找到一个更窄的选择器并使用它。而且，这也不像听起来那么让人分心。你会怎么做？当然，跨浏览器是可靠的。针对任何元素，但一次仅针对一个？在我看来，父母也有边界，这看起来很糟糕：你说得对。无论如何，没有一种方法我想不出来。我觉得没那么糟糕，但并不完美。我试着用不透明度和背景色来做一些更好的事情，但没能做到。我从来没想过，但这能解决不包括悬停的父元素的问题吗？我的意思是，如果我转到一个内部元素，那么焦点将放在内部元素上，而不是父元素上，因此不会更改其cssWell，父元素也会高亮显示，但您可能会找到一个更窄的选择器并使用它。而且，这也不像听起来那么让人分心。你会怎么做？当然，跨浏览器是可靠的。针对任何元素，但一次仅针对一个？在我看来，父母也有边界，这看起来很糟糕：你说得对。无论如何，没有一种方法我想不出来。我觉得没那么糟糕，但并不完美。我试着用不透明度和背景色来做一些更好的事情，但是做不到。据我所知，如果条件在代理示例中是无用的，因为它总是等于event.target。@Shrikant:不，它们确实有用。看看这个，没有它们：@Crowder My bad，当我说根据我的回答，据我所知，如果条件在代理示例中是无用的，因为它总是等于event.target。@Shrikant:不，它们确实有作用。看看这个，没有他们：@Crowder我的坏

---

，当我说采纳我的回答时，我想到了这一点，我喜欢你浓缩东西的方式，并且同意你发布的关于委派的内容是在我的答案中添加委派解决方案，但请注意，上面的内容将在同一元素e.target上重复调用css。如果你说一个ul加一个li加一个strong，如果用户将strong元素悬停，你的代码将在strong元素上调用css三次，一次调用strong，一次调用li，一次调用ul。在这种情况下，这基本上是无害的，但是有很多不必要的工作@ianace，您需要添加this===e.target检查。是的，我刚刚进行了jsbin'ed检查，您是对的。有趣的是，我仍然无法想象它为什么要这样做。必须更仔细地看：谢谢btw@Shrikant:不用担心之所以这样做，是因为委托非常棒，实际上执行冒泡调用，而mouseover和mouseout都是冒泡事件，所以在父元素上也可以看到子元素上的mouseover。@Crowder，对，但对于父元素，它是冒泡事件，对吗？不是源于他们的事件，所以代理不应该拾取它。。。。哦，等等！我们正在使用*选择器，该选择器匹配所有选项，事件将被触发！该死谢谢：我喜欢你浓缩东西的方式，并且同意你在我的回答中添加了一个代理解决方案，但是请注意，上面的内容将在同一个元素e.target上重复调用css。如果你说一个ul加一个li加一个strong，如果用户将strong元素悬停，你的代码将在strong元素上调用css三次，一次调用strong，一次调用li，一次调用ul。在这种情况下，这基本上是无害的，但是有很多不必要的工作@ianace，您需要添加this===e.target检查。是的，我刚刚进行了jsbin'ed检查，您是对的。有趣的是，我仍然无法想象它为什么要这样做。必须更仔细地看：谢谢btw@Shrikant:不用担心之所以这样做，是因为委托非常棒，实际上执行冒泡调用，而mouseover和mouseout都是冒泡事件，所以在父元素上也可以看到子元素上的mouseover。@Crowder，对，但对于父元素，它是冒泡事件，对吗？不是源于他们的事件，所以代理不应该拾取它。。。。哦，等等！我们正在使用*选择器，该选择器匹配所有选项，事件将被触发！该死谢谢：