How to show a "box" around text in HTML tag on mouse over?

I'm writing a BHO for Internet Explorer where I'm searching for specific words in a web page and encapsulates words found in a HTML-tag, for styling purposes.

I have code to change the style-property when hoovering over the tag, but what I want to do is show a "box" around the word, but I don't want to move th开发者_如何转开发e text to any other position than it's original one.

To illustrate, I've made a picture (imagine the word "Overflow!" is in it's own HTML-tag) :

Picture #1 is before, and #2 is when the mouse hoovers the word!

Can anyone please help me with any suggestions regarding how to solve this problem? Javascript? CSS-styling?

---

Introduce a tag around the text you want to highlight, and hook up the onmouseover and onmouseout events to change the CSS class:

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

Then, in your CSS, try something like:

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

---

The outline property is much like border but is overlaid on other content rather then being part of the box model.

---

I had some modest success in IE7 with

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

and

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

until I resized within the browser....