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

Question

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 the 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?

Answer 1

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;
}

Answer 2

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