javascript - Ako zobraziť „krabicu“ okolo textu v HTML tagu pri najetí myšou?

Píšem BHO pre Internet Explorer, kde vyhľadávam konkrétne slová na webovej stránke a obalujem nájdené slová do HTML značky pre účely štýlovania.

Mám kód na zmenu štýlu vlastnosti pri prejdení myšou cez značku, ale to, čo chcem urobiť, je zobraziť „box“ okolo slova, ale nechcem presunúť text na inú pozíciu ako jeho pôvodnú.

Na ilustráciu som urobil obrázok (predstavte si, že slovo „Overflow!“ je vo vlastnom HTML-tagu) :

Obrázok č. 1 je pred, a č. 2 je, keď myš prejde nad slovom!

Môže mi niekto, prosím, pomôcť s akýmikoľvek návrhmi, ako vyriešiť tento problém? Javascript? CSS-styling?

Odpoveď č. 1

Obalte text, ktorý chcete zvýrazniť, do značky a prepojte udalosti onmouseover a onmouseout na zmenu CSS triedy:

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

Potom skúste niečo také vo vašom CSS:

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

Odpoveď č. 2

Vlastnosť outline je veľmi podobná border, ale je prekrytá na iný obsah namiesto toho, aby bola súčasťou modelu boxu.