Как отобразить «рамку» вокруг текста в теге HTML при наведении курсора мыши?

Question

Я пишу BHO для Internet Explorer, где я ищу конкретные слова на веб-странице и инкапсулирую слова, найденные в HTML-теге, в целях стилизации.

У меня есть код для изменения свойства стиля при наведении курсора на тег, но я хочу сделать так, чтобы слово отображалось вокруг слова, но я не хочу перемещать текст в любую другую позицию, кроме оригинал.

Чтобы проиллюстрировать это, я сделал картинку (представьте, что слово «Переполнение!» Находится в его собственном HTML-теге):

Картинка # 1 - раньше, а # 2 - когда мышь наводит курсор на слово!

Может кто-нибудь помочь мне с любыми предложениями относительно того, как решить эту проблему? Javascript? CSS-стиль?

Answer 1

Введите тег вокруг текста, который вы хотите выделить, и подключите события onmouseover и onmouseout, чтобы изменить класс CSS:

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

Затем в вашем CSS попробуйте что-то вроде:

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

Answer 2

Свойство outline очень похоже на border, но накладывается на другое содержимое, а не является частью блочной модели.

Answer 3

У меня был некоторый скромный успех в IE7 с

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <span class="boxclass">tempor</span> incididunt

и

.boxclass:hover { border: 3px solid #000000; margin: -3px; }

, пока я не изменил размеры в браузере ....