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

Question

我正在为Internet Explorer编写BHO，我正在搜索网页中的特定单词并封装HTML标记中的单词，以用于样式目的。

我有代码来清理标签时更改样式属性，但我想要做的是在单词周围显示一个“框”，但我不想将文本移动到任何其他位置而不是它原来的。

为了说明，我已经拍了一张照片（想象一下“Overflow！”这个词就在它自己的HTML标签中）：

图片＃1在之前，＃2是鼠标悬停的时候！

任何人都可以帮我解决有关如何解决此问题的任何建议吗？ JavaScript的？ CSS-造型？

Answer 1

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

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

然后，在你的CSS中尝试类似：

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

Answer 2

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

Answer 3

我在IE7中取得了一些适度的成功

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <span class="boxclass">tempor</span> incididunt

和

.boxclass:hover { border: 3px solid #000000; margin: -3px; }

直到我在浏览器中调整大小....