Inline-Stil als: Hover in CSS

Ich weiß, dass das Einbetten von CSS-Stilen direkt in die HTML-Tags, auf die sie sich auswirken, einen Großteil des Zwecks von CSS zunichte macht, aber manchmal ist es für Debugging-Zwecke nützlich, wie in:

<p style="font-size: 24px">asdf</p>

Wie lautet die Syntax zum Einbetten einer Regel wie folgt:

a:hover {text-decoration: underline;}

in das Stilattribut eines A-Tags? Es ist offensichtlich nicht das ...

<a href="foo" style="text-decoration: underline">bar</a>

... da dies die ganze Zeit zutreffen würde, im Gegensatz zu nur während des Schwebeflugs.

Ich fürchte, es geht nicht, die Pseudoklassen-Selektoren können nicht in Reihe gesetzt werden, Sie müssen es auf der Seite oder auf einem Stylesheet tun.

Ich sollte erwähnen, dass Sie technisch in der Lage sein sollten, dies gemäß der CSS-Spezifikation zu tun , aber die meisten Browser unterstützen dies nicht

Edit: Ich habe gerade einen kurzen Test damit gemacht:

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

Und es funktioniert nicht in IE7, IE8 Beta 2, Firefox oder Chrome. Kann jemand anderes in einem anderen Browser testen?

Wenn Sie nur debuggen, können Sie das CSS mit Javascript ändern:

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>

Wenn es zum Debuggen dient, fügen Sie einfach eine CSS-Klasse zum Schweben hinzu (da Elemente mehr als eine Klasse haben können):

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>

Eine einfache Lösung:

   <a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>

Oder

<script>
 /** Change the style **/
 function overStyle(object){
    object.style.color = 'orange';
    // Change some other properties ...
 }

 /** Restores the style **/
 function outStyle(object){
    object.style.color = 'orange';
    // Restore the rest ...
 }
</script>

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>

Ich habe eine schnelle Lösung für alle zusammengestellt, die Hover-Popups ohne CSS mit den Verhaltensweisen onmouseover und onmouseout erstellen möchten.

http://jsfiddle.net/Lk9w1mkv/

<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>

Wenn dieses <p>Tag aus JavaScript erstellt wird, haben Sie eine andere Option: Verwenden Sie JSS, um Stylesheets programmgesteuert in den Dokumentkopf einzufügen. Es unterstützt '&:hover'. https://cssinjs.org/

Ich glaube nicht, dass jQuery die Pseudo-Selektoren unterstützt, aber es bietet eine schnelle Möglichkeit, einem, mehreren oder allen ähnlichen Steuerelementen und Tags auf einer einzigen Seite Ereignisse hinzuzufügen.

Das Beste ist, Sie können die Ereignisbindungen verketten und alles in einer Skriptzeile ausführen, wenn Sie möchten. Viel einfacher als das manuelle Bearbeiten des gesamten HTML-Codes zum Ein- und Ausschalten. Andererseits, da Sie dasselbe in CSS tun können, weiß ich nicht, dass es Ihnen etwas bringt (außer jQuery zu lernen).