How to show the "field" around the text in the HTML tag on the mouse?

Question

I am writing BHO for Internet Explorer, where I search for specific words on a web page and encapsulate the words found in the HTML tag for style purposes.

I have code to change the style property when iterating over the tag, but what I want to do is show the “box” around the word, but I don’t want to move the text to any other position, the original one.

To illustrate, I took a snapshot (imagine the word “Overflow!” Is in its own HTML tag):

Image # 1 before, and # 2 - when the mouse picks up a word!

Can anyone help me with any suggestions on how to solve this problem? Javascript CSS style?

Answer 1

Present a tag around the text you want to highlight, and hook 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 very similar to border , but is superimposed on other content, and is not part of the window model.

Answer 3

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 in the browser ....