Firebug / Console风格悬停效果

时间:2012-12-05 20:25:59

标签: css console firebug highlight

想想我知道这个问题的答案,但只是想到可能有一些天才知道如何做到这一点...

基本上我正在制作一个网站编辑器,如果我可以复制Firebug和Chrome控制台突出显示元素的方式,当你将鼠标悬停在那些检查员的html / elements标签中的代码时,这将是非常方便的...

这不是我可以用背景效果做的事情,因为它没有突出显示整个Div(内容显示在高亮显示之上)而且我认为无论如何都要在所有内容的顶部进行div叠加但是它不会阻止底层元素上的鼠标移动......

任何想法?是否有任何特定于浏览器的代码可以实现这种目的?

2 个答案:

答案 0 :(得分:0)

一般来说,Firefox扩展主要是JavaScript。由于Firebug已获得BSD许可,您可以在其project site上浏览其源代码。也许你会找到相关的代码,并了解如何解决你的具体任务。

答案 1 :(得分:0)

您可以在鼠标悬停时在CSS中添加outline - 这会突出显示该元素而不会更改其位置,因为outline不会影响布局。 box-shadow的工作方式也类似。

事实上,在我看来,Firebug为元素添加了一个深蓝色box-shadow来突出显示它们。