Wie schreibe ich ein: Hover in Inline-CSS?

1017

Ich habe einen Fall, in dem ich Inline-CSS-Code schreiben muss, und ich möchte einen Schwebestil auf einen Anker anwenden.

Wie kann ich a:hoverInline-CSS innerhalb des HTML-Stilattributs verwenden?

Beispielsweise können Sie CSS-Klassen in HTML-E-Mails nicht zuverlässig verwenden.

html css inline-styles Amr Elgarhy
quelle
24
Das Einbetten von HTML in Blogging-Anwendungen erfordert häufig auch die ausschließliche Verwendung von Inline-Stilen. Insbesondere, wenn Sie den HTML-Code über einen Drittanbieter-Client einbetten und keinen Zugriff auf die Themen des Benutzers haben.
Vorsehung
8
Hierfür wird ein CSS-Standard vorgeschlagen. Keine Ahnung, welche Art von Browser-Unterstützung es haben könnte (Hinweis: Sie könnten benutzerdefinierte Tags wie -moz usw. verwenden): w3.org/TR/2002/WD-css-style-attr-20020515
Kato
1
Mögliches Duplikat von Ist es möglich, Inline-Pseudo-Stile zu erstellen?
Synetech
17
Ach komm schon. Manchmal erstellen Sie nur einen Landingpage-Prototyp und möchten nicht die Stylesheets aufteilen oder einen neuen Vorlagenzweig erstellen oder was auch immer, um zu testen, ob die grüne Schaltfläche besser funktioniert. Meine Güte.
ElBel
1
@FriendlyNeighborhoodIdiot Diese Seite ist 13 Jahre alt, der Entwurf wurde seitdem aufgegeben.
Tofandel

Antworten:

573

Kurze Antwort: Sie können nicht.

Lange Antwort: Das solltest du nicht.

Geben Sie ihm einen Klassennamen oder eine ID und verwenden Sie Stylesheets, um den Stil anzuwenden.

:hoverist ein Pseudo-Selektor und hat für CSS nur innerhalb des Stylesheets eine Bedeutung. Es gibt kein Inline-Äquivalent (da es die Auswahlkriterien nicht definiert).

Antwort auf die Kommentare des OP:

Unter Totally Pwn CSS with Javascript finden Sie ein gutes Skript zum dynamischen Hinzufügen von CSS-Regeln. Siehe auch Stylesheet ändern für einige der Theorien zu diesem Thema.

Vergessen Sie auch nicht, dass Sie Links zu externen Stylesheets hinzufügen können, wenn dies eine Option ist. Zum Beispiel,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

Achtung: Die oben übernimmt gibt es einen Kopfabschnitt.

Jonathan Fingland
quelle
4
Sie können CSS-Klassen in Javascript hinzufügen
Jonathan Fingland
204
Unter anderen Umständen ist Inline-CSS die einzige Option, z. B. HTML-E-Mails (z. B. ignoriert Google Mail CSS, sofern es nicht inline ist). Leider habe ich mit Javascript, das auch in den meisten E-Mail-Clients entfernt wurde, noch keine Möglichkeit gefunden, Hover-Effekte hinzuzufügen.
Simon East
24
@Kato, während das ein großartiger Link ist, und ich wünschte wirklich, es hätte funktioniert, leider nicht. Um dies zu bestätigen, habe ich die Syntax getestet style="{color:green;} :hover { color: red; }"und Firefox hat es geschafft, den Link grün zu färben, aber den Hover ignoriert. Chrome ignorierte beide. Fortgesetzte Tests wären ziemlich sinnlos.
Jonathan Fingland
9
Ich habe es nicht als funktionierende Lösung angegeben. Ich sagte, es sei nicht "ganz" richtig zu sagen, dass es kein Inline-Äquivalent gibt und dass Pseudo-Selektoren außerhalb von Stylesheets keine Bedeutung haben. Wie ist das unangemessen?
Kato
5
Warum lange Antwort ist Sie sollten nicht ... Sie ... Sie sollten nicht verallgemeinern. Ich habe versucht, E-Mail-Nachrichten mit HTML zu senden, aber raten Sie mal, was ... Google Mail entfernt alle Stil-Tags, alle externen Stilreferenzen und alle Skripte. Also ... gibt es eine Möglichkeit, die Schwebefarbe von Links in E-Mails zu gestalten, die an Google Mail gesendet werden? Hoffe es tut ... Hoffnung ist die letzte die stirbt !!! =)
Miguel Angelo
435

Sie können den gleichen Effekt erzielen, indem Sie Ihre Stile mit JavaScript in den Parametern onMouseOverund ändern. Dies onMouseOutist jedoch äußerst ineffizient, wenn Sie mehr als ein Element ändern müssen:

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>
Erweitern Sie das Snippet

Ich kann mich auch nicht sicher erinnern, ob dies thisin diesem Zusammenhang funktioniert. Möglicherweise müssen Sie es mit wechseln document.getElementById('idForLink').

Alex S.
quelle
12
das ist Schlau! Funktioniert auch für einen Hintergrundfarben- <div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
Schwebeeffekt
46
Ich muss darüber lachen, dass dies als 'klug' angesehen wird :) Es ist schwer vorstellbar, dass einige Leute nicht da waren, als dies der herausragende / einzige Weg war, diesen Effekt zu erzielen. Oder noch schlimmer, um ein 'Bild' zu haben und das Bild auszutauschen, nur um den 'Hover'-Effekt zu erzielen. Ich fühle mich alt! Aber es reicht zu sagen, es beantwortet die Frage des OP :)
Manachi
5
Da muss ich Manachi zustimmen. Dies ist wie ein Rückblick auf Javascript aus den 90er Jahren, P
Eric Castro
9
Alt, neu, alt oder voraus. Es beantwortete die Frage und half mir. Vielen Dank, @peter.
user2060451
4
Ich musste dies für eine E-Mail tun und es funktionierte. Vielen Dank! Dies löst tatsächlich die Frage, im Gegensatz zu der akzeptierten Antwort.
theUtherSide
53

Sie könnten es irgendwann in der Vergangenheit tun . Aber jetzt (gemäß der neuesten Überarbeitung des gleichen Standards, der Kandidatenempfehlung) können Sie nicht.

Fuddin
quelle
3
Alle anderen Antworten sagten, dass es nicht möglich ist, aber deine zeigen, dass es möglich ist, deine Antwort ist anders, ich teste es.
Amr Elgarhy
2
Entschuldigung, ich habe gerade das Datum des Artikels überprüft. Es ist 10 Jahre alt. Es gibt also keine Garantie dafür, dass es funktioniert. Wenn ja, sagen Sie es mir bitte auch.
Fuddin
2
Ich habe das getestet: <a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> Aber es hat nicht funktioniert
Amr Elgarhy
5
Falls jemand auf diese Antwort stößt, hat der Antwortende hier eine Frage zu dieser Funktion gestellt: stackoverflow.com/questions/9884182/…
BoltClock
9
Genauer gesagt, Sie könnten es irgendwann in der Vergangenheit tun. Aber jetzt (gemäß der neuesten Überarbeitung des gleichen Standards, der Kandidatenempfehlung) können Sie nicht .
Ilya Streltsyn
34

Ich bin sehr spät dran, aber ich war traurig zu sehen, dass niemand dies vorgeschlagen hat. Wenn Sie tatsächlich Inline-Code benötigen, ist dies möglich. Ich brauchte es für einige Hover-Buttons. Die Methode ist folgende:

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a
Erweitern Sie das Snippet

In diesem Fall der Inline-Code: "Hintergrundfarbe: rot;" Ist die Schalterfarbe beim Schweben, geben Sie die gewünschte Farbe ein und dann funktioniert diese Lösung. Mir ist klar, dass dies in Bezug auf die Kompatibilität möglicherweise nicht die perfekte Lösung ist. Dies funktioniert jedoch, wenn dies unbedingt erforderlich ist.

lukesrw
quelle
4
Vielen Dank. Das ist eine großartige Antwort. Ich denke, diese Antwort muss eine Lösung sein.
Hovhannes Sargsyan
64
Nein, OP sagte, sie wollten es in Inline-CSS innerhalb des HTML-Stilattributs .
jj_
3
Ich weiß, jj_- aber diese Methode ermöglicht es Ihnen, nur wenige Zeilen in das CSS einzufügen und es an vielen Stellen immer wieder zu verwenden. Viele Leute (einschließlich ich) haben dies als hilfreiche Alternative empfunden.
Lukesrw
2
Dies sollte die eigentliche Antwort sein, mit einer geringfügigen Änderung: Legen Sie keine der Farben im Stil fest, sondern nur die Regel, die beim Bewegen des Mauszeigers vom übergeordneten Element geerbt werden soll, und setzen Sie dann die beiden Farben inline.
Hayko Koryun
4
Dies ist nur der "normale" Weg, den alle sagten, ist der richtige Weg. Es ist jedoch kein Inline-Weg, der die ursprüngliche OP-Anforderung war.
wcndave
31

Sie können nicht genau das tun, was Sie beschreiben, da dies a:hoverTeil des Selektors ist und nicht der CSS-Regeln. Ein Stylesheet besteht aus zwei Komponenten:

selector {rules}

Inline-Stile haben nur Regeln. Der Selektor ist implizit das aktuelle Element.

Der Selektor ist eine ausdrucksstarke Sprache, die eine Reihe von Kriterien beschreibt, mit denen Elemente in einem XML-ähnlichen Dokument übereinstimmen.

Sie können sich jedoch nähern, da ein styleSet technisch fast überall hingehen kann:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
Rex M.
quelle
3
Eigentlich kann man nicht: "HTML erlaubt eine beliebige Anzahl von STYLE-Elementen im HEAD-Abschnitt eines Dokuments." ( w3.org/TR/html4/present/styles.html#edef-STYLE )
Éric Araujo
2
Funktioniert auf meiner Maschine. Vielen Dank!
Josh Habdas
@ ÉricAraujo: Dann wickeln Sie diesen gesamten Inhalt unter ein <html> </html>Tag
Fuddin
30

mit Javascript:

a) Hinzufügen eines Inline-Stils 

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) oder eine etwas schwierigere Methode - Hinzufügen von "Mouseover"

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

Hinweis: Mehrwortstile (dh font-size) in Javascript werden zusammen geschrieben :

element.style.fontSize="12px"

T.Todua
quelle
3
Da diese Antwort nach unten bearbeitet wurde, scheint sie für die ursprüngliche Frage völlig irrelevant zu sein ...
Bill
1
Wow, das denkt über den Tellerrand hinaus ... ich liebe es!
Theglossy1
14

Dies ist das beste Codebeispiel:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>
Erweitern Sie das Snippet

Moderator-Vorschlag: Halten Sie Ihre Trennung von Bedenken aufrecht.

HTML 

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>
Erweitern Sie das Snippet

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}
Erweitern Sie das Snippet

user1476842
quelle
10

Inline-Pseudoklassendeklarationen werden in der aktuellen Iteration von CSS nicht unterstützt (obwohl sie meines Wissens in einer zukünftigen Version vorliegen können).

Im Moment ist es wahrscheinlich am besten, einfach einen Stilblock direkt über dem Link zu definieren, den Sie stylen möchten:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
inkedmn
quelle
4
Diese Idee wird zum Glück fallen gelassen. (Siehe lists.w3.org/Archives/Public/www-style/2009Jun/0341.html unter "Abandoned Working Drafts".)
Ms2ger
3
Da ist ein . fehlt in dieser Antwort.
Joel
9

Wie bereits erwähnt, können Sie keine beliebigen Inline-Stile für den Hover festlegen, aber Sie können den Stil des Hover-Cursors in CSS mithilfe der folgenden Angaben im entsprechenden Tag ändern :

style="cursor: pointer;"
Rutherford
quelle
2
das sollte die beste Antwort sein
Vladislav Guleaev
6 
<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover ist eine Pseudoklasse und kann daher nicht mit einem Stilattribut angewendet werden. Es ist Teil des Selektors.

Joel
quelle
2
@Derek für den Fall, dass es immer noch von Interesse ist / für andere, die lesen: "~ /" (Tilde-Schrägstrich) ist ein serverseitiger Verweis auf das Anwendungsstammverzeichnis in asp.net-Webanwendungen. (Das Anwendungsstammverzeichnis kann natürlich ein Unterordner sein). Die Verwendung hier wäre nicht korrekt gewesen, daher wurde die Antwort bearbeitet, seit Sie die Frage gestellt haben (ich vermute).
Chris
5

Du kannst das. Aber nicht in Inline-Stilen. Sie können onmouseoverund onmouseoutEreignisse verwenden:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>
Erweitern Sie das Snippet


quelle
4

Ihren Kommentaren zufolge senden Sie trotzdem eine JavaScript-Datei. Führen Sie den Rollover in JavaScript durch. Die Methode von jQuery$.hover() macht es einfach, wie jeder andere JavaScript-Wrapper. Auch in reinem JavaScript ist es nicht allzu schwer.

Vineel Shah
quelle
Dies ist zwar eine
Problemumgehung,
4

Es gibt keine Möglichkeit, dies zu tun. Sie können ein JavaScript- oder einen CSS-Block verwenden.

Möglicherweise gibt es eine JavaScript-Bibliothek, die ein proprietäres Stilattribut in einen Stilblock konvertiert. Dann ist der Code jedoch nicht standardkonform.

m_vitaly
quelle
2

Ich habe gerade eine andere Lösung gefunden.

Mein Problem: Ich habe ein <a>Tag um einige Folien / Hauptinhaltsanzeige sowie <a>Tags in der Fußzeile. Ich möchte, dass sie an dieselbe Stelle im IE gehen, damit der gesamte Absatz unterstrichen wird onHover, auch wenn es sich nicht um Links handelt: Die Folie als Ganzes ist ein Link. IE kennt den Unterschied nicht. Ich habe auch einige aktuelle Links in meiner Fußzeile, die die Unterstreichung und Farbänderung benötigenonHover . Ich dachte, ich müsste Stile in die Fußzeilen-Tags einfügen, um die Farbe zu ändern, aber der Rat von oben legt nahe, dass dies unmöglich ist.

Lösung: Ich habe den Fußzeilenlinks zwei verschiedene Klassen gegeben und mein Problem wurde gelöst. Ich konnte die onHoverFarbänderung in einer Klasse haben, die Folien onHoverhaben keine Farbänderung / Unterstreichung und konnte immer noch die externen HREFS in der Fußzeile und die Folien gleichzeitig haben!

Liz
quelle
1

Ich stimme dem Schatten zu . Sie können das Ereignis onmouseoverund verwenden onmouseout, um das CSS zu ändern via JavaScript.

Und sagen Sie nicht, dass JavaScript aktiviert sein muss. Es ist nur ein Stilproblem, daher spielt es keine Rolle, ob es einige Besucher ohne JavaScript gibt;) Obwohl der größte Teil von Web 2.0 mit JavaScript funktioniert. Siehe Facebook zum Beispiel (viel JavaScript) oder Myspace .

Jaysn
quelle
0

Dies ist ziemlich spät im Spiel, aber wann würden Sie JavaScript in einer HTML-E-Mail verwenden? In der Firma, für die ich derzeit arbeite (Reime mit Abodee), verwenden wir beispielsweise den kleinsten gemeinsamen Nenner für die meisten E-Mail-Marketingkampagnen - und JavaScript wird einfach nicht verwendet. Je. Es sei denn, Sie beziehen sich auf eine Art Vorverarbeitung.

Wie in einem verwandten Beitrag erwähnt: "Lotus Notes, Mozilla Thunderbird, Outlook Express und Windows Live Mail scheinen alle eine Art JavaScript-Ausführung zu unterstützen. Sonst nichts."

Link zu dem Artikel, aus dem dies entnommen wurde: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

Wie würde sich das Schweben auf mobile Geräte übertragen lassen? Deshalb gefällt mir die Antwort von oben:Long answer: you shouldn't.

Wenn jemand mehr Einblicke in dieses Thema hat, kann er mich gerne korrigieren. Vielen Dank.

Shawn Spencer
quelle
0

Das ist also nicht ganz das, wonach der Benutzer gesucht hat, aber ich habe diese Frage auf der Suche nach einer Antwort gefunden und mir etwas Ähnliches ausgedacht. Ich hatte eine Reihe sich wiederholender Elemente, die eine neue Farbe / einen neuen Hover für eine Registerkarte in ihnen benötigten. Ich verwende Lenker, was der Schlüssel zu meiner Lösung ist, aber möglicherweise funktionieren auch andere Vorlagensprachen.

Ich habe einige Farben definiert und sie für jedes Element an die Lenkervorlage übergeben. Oben in der Vorlage habe ich ein Stil-Tag definiert und meine benutzerdefinierte Klasse und Schwebefarbe eingefügt.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Dann habe ich den Stil in der Vorlage verwendet:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

Möglicherweise benötigen Sie das nicht !important

Webhound
quelle
0

Sie können einen Code in verschiedenen Typen schreiben

zuerst kann ich das schreiben

html

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

CSS

.one{
  text-decoration: none;
}

Sie können einen anderen Weg versuchen

html

<a href="https://www.google.com/" class="one">Hello siraj</a>

CSS

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

Sie können auch versuchen, in jquery zu schweben

Java-Skript

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

html

<p>Hover the mouse pointer over this paragraph.</p>

In diesem Code haben Sie eine Drei-Funktion in jquery. Zuerst bereiten Sie eine Funktion vor, die die Grundfunktion von jquery darstellt. Zweitens haben Sie eine Hover-Funktion in dieser Funktion, wenn Sie mit dem Mauszeiger auf den Text fahren, wird die Farbe geändert und dann die nächste Wenn Sie den Zeiger auf den Text loslassen, hat er die andere Farbe und dies ist die dritte Funktion

Siraj Ahmed
quelle
Bitte vermeiden Sie doppelte Antworten
Simas Joneliunas
ok sir simas-joneliunas
Siraj Ahmed
Keiner dieser Ansätze löst das in der Frage zum Ausdruck gebrachte Problem. Sie können JS in einer HTML-formatierten E-Mail überhaupt nicht verwenden, und der andere von Ihnen vorgeschlagene Ansatz verwendet Klassen, die ausdrücklich ausgeschlossen sind.
Quentin
-1

Ich musste Javascript vermeiden, konnte aber mit serverseitigem Code arbeiten.

Also habe ich eine ID generiert, einen Stilblock erstellt und die Verknüpfung mit dieser ID generiert. Ja, es ist gültiges HTML.

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>
Erweitern Sie das Snippet

BananaAcid
quelle
-2

Sie können die Pseudoklasse a:hovernur in externen Stylesheets verwenden. Daher empfehle ich die Verwendung eines externen Stylesheets. Der Code lautet:

a:hover {color:#FF00FF;}   /* Mouse-over link */
user1466310
quelle
Sicherlich brauchen Sie keine externen Blätter, verwenden Sie einfach das styleTag.
Dmitri Zaitsev
-2

Sie können eine ID erstellen, indem Sie eine Klasse hinzufügen, jedoch niemals inline.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 Zeilen, aber Sie können die Klasse überall wiederverwenden.

Fehler
quelle
-3

Mein Problem war, dass ich eine Website erstelle, die viele Bildsymbole verwendet, die beim Hover durch ein anderes Bild ausgetauscht werden müssen (z. B. werden blau-ish-Bilder beim Hover rot-ish). Ich habe die folgende Lösung dafür hergestellt:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

Ich stellte einen Container mit den beiden Bildern vor. Der erste ist sichtbar und der andere ist ausgeblendet (Anzeige: keine). Wenn Sie den Mauszeiger über den Container bewegen, wird der erste ausgeblendet (Anzeige: keine) und der zweite wird erneut angezeigt (Anzeige: Block).

Jochem Geussens
quelle