javascript - How to show a "box" around text in HTML tag on mouse over? - Stack Overflow

admin管理员组

文章数量:1389779

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?

• javascript
• html
• css
• internet-explorer
• mouseover

Share Improve this question Follow edited Feb 20, 2011 at 13:42 Mike Chamberlain 42.6k2828 gold badges113113 silver badges159159 bronze badges asked Feb 19, 2011 at 16:38 nelshhnelshh 1,05111 gold badge1212 silver badges1515 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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....

本文标签： javascriptHow to show a quotboxquot around text in HTML tag on mouse overStack Overflow