Javascript 如何显示“a”；方框“；鼠标悬停在HTML标记中的文本周围？

我正在为InternetExplorer编写一个BHO，其中我正在搜索网页中的特定单词，并封装在HTML标记中找到的单词，用于样式设计

我有代码来更改标记上的style属性，但我想做的是在单词周围显示一个“框”，但我不想将文本移动到原始位置以外的任何其他位置

为了说明这一点，我制作了一张图片（想象一下“溢出”这个词在它自己的HTML标记中）：

图#1在前面，图#2在老鼠踩着单词的时候

---

有谁能帮我提出一些关于如何解决这个问题的建议吗？Javascript？CSS样式？

属性与

边框

非常相似，但覆盖在其他内容上，而不是框模型的一部分。

在要突出显示的文本周围引入标记，并连接onmouseover和onmouseout事件以更改CSS类：

<span onmouseover="this.className='myMouseOverClass'" onmouseout="this.className=''">Overflow!</span>

---

我在IE7上取得了一些小小的成功

Lorem ipsum door sit amet，concetetur adipising elit，sed do eiusmod temporal incidedunt

及

.boxclass:悬停{
边框：3px实心#000000；
保证金：-3px；
}

---

在我在浏览器中调整大小之前……

但这仅在IE8+（参考：）中受支持，所以玩边框和摆弄边距/填充可能是唯一的方法。@D.N:确定吗？根据w3schools.com，所有主流浏览器都支持它。是的，上面写着“

注意：如果指定了一个！DOCTYPE，Internet Explorer 8（及更高版本）支持outline style属性”

”：）但是来自同一个链接：“outline style属性在所有主要浏览器中都受支持。”这意味着您不同意W3S关于什么是主要浏览器的观点。一般来说，W3S很糟糕——对不起，IE8。不过，表面上应该在IE7中起作用。忘了我在这个框中升级了它。你应该指定你的目标IE的版本。（请注意下面关于7/8中支持的讨论。）

.myMouseOverClass
{
  outline-style:solid;
  outline-width:2px;
  outline-color:red;
}