Wie schreibt man ein:hover in Inline-CSS?

Question

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

Wie kann ich die a:hover in Inline-CSS innerhalb des HTML-Style-Attributs?

Sie können z. B. keine CSS-Klassen in HTML-E-Mails verwenden.

Answer 1

Sie können einen Code in verschiedenen Arten schreiben

zuerst kann ich dies 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 Hover in Jquery versuchen

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 Sie bereit eine Funktion, die die grundlegende Funktion von jquery dann zweitens haben Sie eine Hover-Funktion in dieser Funktion, wenn Sie einen Zeiger auf den Text schweben die Farbe geändert werden und dann die nächste, wenn Sie den Zeiger auf den Text loslassen wird es die andere Farbe sein und dies ist die dritte Funktion

Answer 2

Ich stimme zu mit Schatten . Sie können die onmouseover y onmouseout Ereignis zum Ändern der CSS über JavaScript.

Und sagen Sie nicht, dass JavaScript aktiviert sein muss. Es ist nur eine Frage des Stils, es macht also nichts, wenn es einige Besucher ohne JavaScript gibt ;) Obwohl die meisten Web 2.0 funktioniert mit JavaScript. Siehe Facebook zum Beispiel (viel JavaScript) oder Myspace .

Answer 3

Auch wenn die Aussage "Sie sollten nicht" zutrifft, kann es Fälle geben, in denen Sie dies dennoch erreichen wollen. Mein Anwendungsfall war die dynamische Einstellung einer Hover-Farbe in Abhängigkeit von einem Datenwert um dies nur mit CSS zu erreichen, können Sie von der Spezifität profitieren.

Nur CSS ansprechen

CSS

/* Set your parent color for the inherit property */
.sidebar {
  color: green;
}

/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
  color: inherit
}

.list-item a:hover {
  color: inherit
}

/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
  color: inherit !important;
}

Dann wird Ihr Markup in etwa so aussehen:

Markup

<nav class="sidebar">
  <ul>
    <li class="list-item">
      <a
        href="http://stackoverflow.com/foo"
        class="dynamic-hover-color"
        style="color: #{{category.color}};"
      >
        Category
      </a>
    </li>
  </ul>
</nav>

Ich tue dieses Beispiel mit Lenkstangen, aber die Idee ist, dass Sie nehmen, was für Ihren Anwendungsfall bequem ist, um den Inline-Stil zu setzen (auch wenn es das Schreiben manuell die Farbe auf Hover Sie wollen)

Answer 4

Das kommt jetzt ziemlich spät, aber wann würden Sie JavaScript in einer HTML-E-Mail verwenden? In dem Unternehmen, für das ich derzeit arbeite (reimt sich auf Abodee), verwenden wir beispielsweise den kleinsten gemeinsamen Nenner für die meisten E-Mail-Marketingkampagnen - und JavaScript wird einfach nicht verwendet. Niemals. Es sei denn, Sie sprechen von einer Art Vorverarbeitung.

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

Link zu dem Artikel, aus dem dies entnommen wurde: [ [http://en.wikipedia.org/wiki/Comparison\_of\_e-mail\_clients\]](http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients])

Und wie würde sich das Schweben auf mobile Geräte übertragen? Deshalb mag ich die Antwort von oben: Long answer: you shouldn't.

Wenn jemand mehr Einblicke in dieses Thema hat, kann er mich gerne korrigieren. Ich danke Ihnen.

Answer 5

Dies ist also nicht ganz das, wonach der Benutzer gesucht hat, aber ich habe diese Frage bei der Suche nach einer Antwort gefunden und bin auf etwas gekommen, das irgendwie damit zusammenhängt. Ich hatte eine Reihe von sich wiederholenden Elementen, die eine neue Farbe/Schwebebalken für eine Registerkarte in ihnen benötigt. Ich verwende Handlebars, was der Schlüssel zu meiner Lösung ist, aber andere Templateing-Sprachen können auch funktionieren.

Ich habe einige Farben definiert und sie für jedes Element in die Lenker-Vorlage übernommen. Oben in der Vorlage habe ich ein Style-Tag definiert und meine benutzerdefinierte Klasse und Hover-Farbe 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 nicht die !important