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?
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?
Share Improve this question edited Feb 20, 2011 at 13:42 Mike Chamberlain 42.6k28 gold badges113 silver badges159 bronze badges asked Feb 19, 2011 at 16:38 nelshhnelshh 1,0511 gold badge12 silver badges15 bronze badges 1- You should specify what version(s) of IE you're targeting. (Note discussion below about support in 7/8.) – Su' Commented Feb 20, 2011 at 10:52
3 Answers
Reset to default 4Introduce 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....