javascript - Hvordan vise en «boks» rundt tekst i HTML-tag ved musepek?

Jeg skriver en BHO for Internet Explorer hvor jeg søker etter spesifikke ord på en webside og omslutter ord som finnes i en HTML-tag, for stilformål.

Jeg har kode for å endre stil-egenskapen når man holder musepekeren over taggen, men det jeg vil gjøre er å vise en "boks" rundt ordet, men jeg vil ikke flytte teksten til noen annen posisjon enn den opprinnelige.

For å illustrere, har jeg laget et bilde (tenk deg at ordet «Overflow!» er i sin egen HTML-tagg) :

Bilde #1 er før, og #2 er når musen svever over ordet!

Kan noen vennligst hjelpe meg med forslag til hvordan jeg kan løse dette problemet? Javascript? CSS-styling?

Svar #1

Sett inn en tag rundt teksten du vil fremheve, og koble til onmouseover- og onmouseout-hendelsene for å endre CSS-klassen:

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

Deretter, i CSS-en din, prøv noe som:

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

Svar #2

Egenskapen outline ligner mye på border, men legges over annet innhold i stedet for å være en del av boksmodellen.