javascript - Wie zeigt man ein "Feld" um Text in einem HTML-Tag beim Mouseover an?

Ich schreibe ein BHO für den Internet Explorer, in dem ich nach bestimmten Wörtern auf einer Webseite suche und gefundene Wörter in einem HTML-Tag kapsle, zu Styling-Zwecken.

Ich habe Code, um die Stil-Eigenschaft zu ändern, wenn man über das Tag hovert, aber was ich tun möchte, ist, eine „Box“ um das Wort zu zeigen, aber ich möchte den Text nicht an eine andere Position als seine ursprüngliche verschieben.

Um dies zu veranschaulichen, habe ich ein Bild gemacht (stellen Sie sich vor, das Wort „Overflow!“ befindet sich in seinem eigenen HTML-Tag) :

Bild #1 ist vorher, und #2 ist, wenn die Maus über dem Wort schwebt!

Kann mir bitte jemand mit Vorschlägen helfen, wie man dieses Problem lösen kann? Javascript? CSS-Styling?

Antwort #1

Fügen Sie ein -Tag um den Text ein, den Sie hervorheben möchten, und verbinden Sie die onmouseover- und onmouseout-Ereignisse, um die CSS-Klasse zu ändern:

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

Versuchen Sie dann in Ihrem CSS etwas wie:

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

Antwort #2

Die outline-Eigenschaft ist ähnlich wie border, wird jedoch über anderen Inhalten angezeigt, anstatt Teil des Box-Modells zu sein.