javascript - Bagaimana untuk menunjukkan "kotak" di sekeliling teks dalam tag HTML apabila tetikus berada di atasnya?

Saya sedang menulis BHO untuk Internet Explorer di mana saya mencari perkataan tertentu di halaman web dan membungkus perkataan yang ditemui dalam tag HTML, untuk tujuan penggayaan.

Saya mempunyai kod untuk menukar sifat-gaya apabila melayang di atas tag, tetapi apa yang saya ingin lakukan ialah memaparkan "kotak" di sekeliling perkataan itu, tetapi saya tidak mahu menggerakkan teks ke sebarang kedudukan lain selain daripada kedudukannya yang asal.

Untuk menggambarkan, saya telah membuat sebuah gambar (bayangkan perkataan "Overflow!" berada dalam tag HTMLnya sendiri) :

Gambar #1 adalah sebelum, dan #2 adalah apabila tetikus melayang di atas perkataan!

Adakah sesiapa boleh membantu saya dengan sebarang cadangan mengenai bagaimana untuk menyelesaikan masalah ini? Javascript? Gaya CSS?

Jawapan #1

Perkenalkan tag di sekitar teks yang anda mahu sorot, dan sambungkan acara onmouseover dan onmouseout untuk menukar kelas CSS:

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

Kemudian, dalam CSS anda, cuba sesuatu seperti:

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

Jawapan #2

Properti outline adalah seperti border tetapi ia ditempatkan di atas kandungan lain dan bukannya menjadi sebahagian daripada model kotak.