javascript - 如何在鼠标悬停时在 HTML 标记中的文本周围显示 "box"？

Question

我正在为 Internet Explorer 编写 BHO，我在其中搜索网页中的特定词并将在 HTML 标记中找到的词封装起来，以用于样式设置。

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

为了说明，我制作了一张图片(想象一下“溢出!”这个词在它自己的 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;
}