Inline-Stil als: Hover in CSS

87

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.

html css

— Raldi
quelle

Wenn Sie versuchen, den Hover dynamisch zu gestalten, können Sie theoretisch mithilfe von Javascript eine Hover-Regel in ein Stylesheet mithilfe der Liste window.document.styleSheets vorhandener Blätter einfügen.

— GAgnew

Siehe auch stackoverflow.com/questions/5293280/…

— Rogerdpack

93

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?

— Glenn Slaven
quelle

3

Dies ist ein CSS 3-Arbeitsentwurf mit sehr niedriger Priorität, der seit sechs Jahren nicht mehr aktualisiert wurde. Aus der Spezifikation: 'Es ist unangemessen, W3C-Arbeitsentwürfe als Referenzmaterial zu verwenden oder sie als andere als "in Arbeit" zu zitieren. '

— Jim

1

Stimmt, aber Browser implementieren einige CSS3-Regeln, sollte in diesem Zusammenhang wahrscheinlich das falsche Wort sein

— Glenn Slaven

Browser implementieren normalerweise CSS-Funktionen, die sich in einem Entwicklungsstadium befinden, z. B. die Deckkraft stammt aus der CSS-Farbe (letzter Aufruf), und Medienabfragen sind eine Kandidatenempfehlung.

— Jim

Wäre style = ": hover {}" nicht gleichbedeutend mit "a {: hover {}}" im Stylesheet? Das ist offensichtlich ein Syntaxfehler.

— Kornel

30

Diese Antwort wurde vor sehr langer Zeit veröffentlicht. Seitdem haben sich die Dinge geändert und die aktuelle Version der relevanten W3C-Spezifikation - CSS Style Attribute Rec. ( w3.org/TR/css-style-attr/#syntax ) - besagt eindeutig, dass das style-Attribut nur den Inhalt eines CSS-Deklarationsblocks enthalten kann. Daher ist es jetzt unmöglich, Pseudoelemente mit styleAttributen einzufügen .

— Ilya Streltsyn

23

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>

— Aleksi Yrttiaho
quelle

1

Ich habe mit JSF nach einer Lösung gesucht und dies hat mir geholfen, das Problem zu beheben. onmousemove = "this.style.color = '## {cc.attrs.color}';" onmouseout = "this.style.color = 'white';"

— Kdoteu

16

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>

— Rodrick Chapman
quelle

2

Dies ist wahrscheinlich der nächste Weg, um den gewünschten Effekt zu erzielen

— Glenn Slaven

14

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>

— Roberto
quelle

1

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>

— Josh Kernich
quelle

0

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/

— michielbdejong
quelle

-2

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).

— CMPalmer
quelle