Hallo,
Ich möchte folgendes umsetzen. Zeigt man mit dem Mauszeiger auf die Email-Adresse, soll sich die Schriftfarbe in das angegebene Orange ändern. Ich möchte die css-Angabe direkt in den html-Tag schreiben. Dazu bastelte ich mir diesen Tag zusammen. Da sich die Schriftfarbe nicht ändert, habe ich wo einen Fehler eingebaut. Wie soll dieser funktionierende Tag aussehen ?
<a href="mailto:office@xyz.at" style="a:hover:color=#e09900;">office@xyz.at</a>
Danke für die Hilfe.
Grüße
Wenn Du die CSS Anweisung in eine eigene Zeile schreibst, dann klappt's 🤓
<style>
a:hover {color: #e09900;}
</style>
<a href="mailto:office@xyz.at">office@xyz.at</a>
Probier's mal...
Hi BeRo,
So wie du die Anweisung geschrieben hast, müsste sie aber im Head-Bereich stehen. Oder liege ich da falsch ? Ich bräuchte die Anweisung aber direkt im diesen "Email-Tag"
<a href="mailto:office@xyz.at">office@xyz.at</a>
[...] So wie du die Anweisung geschrieben hast, müsste sie aber im Head-Bereich stehen [...]
Das ist nicht falsch. 🤓
Im Ernst, wie gesagt sollte die CSS Anweisung in einer separaten Zeile stehen, gerne im HTML Head der Seite. Die Anweisung gilt für alle a-Tags auf der Seite, egal, wo Du die einbaust...
Die Zeile <a href="mailto:office@xyz.at">office@xyz.at</a> kann also problemlos irgendwo im HTML Code der Seite stehen.
Klappt jetzt 👍
Ich danke dir !
Codemanipulationen kann man machen. Durchaus. Muss man aber nicht 🙃
Sobald man mehrere davon hat, je mehr Skripte man einbauen möchte (zB Fremdwidgets) umso anfälliger wird der Code. Meiner Erfahrung nach sollte man Eingriffe so gering wie nötig halten. Das verringert auch die Anfälligkeit von Problemen bei Updates.
In deinem Fall ist es imho nicht nötig.
Das geht auch mit Bordmitteln.
Den Text markieren; verlinken. Diesen Text kopieren per STRG+C -->
In MouseOver oder einer neuen Ebene darüber (!) diesen Text "an gleiche Position" einfügen lassen und nur den dortigen Eintrag farblich anpassen. Dies geht am einfachsten über die Ebenengalerie. Die MouseOff-Ebene bleibt also gleich.
Dann dem Text mit Animation die Option des Einblendens geben. Fertig.
Man muss nur darauf achten, nicht die gesamte Textspalte zu markieren, sondern nur das Wort oder Symbol.
Nicht sinnvoll ist es mit dieser Methode in der MouseOverebene bzw der neuen Ebene die Schrift größer zu wählen als in der MouseOff. Aber das war ja nicht dein Anliegen. So können sich die zwei Zustände also sehr gut überdecken.
Natürlich kann man beliebige Effekte in immer neuen Ebenen abdecken. Gruß Marboe
Danke für diese Erklärung 👍
Grüße
Hallo,
ich bräuchte jetzt doch nochmal eure Hilfe 😊 Ich bräuchte diesen hover Effekt auch nochmal nur in diesem a-Tag, dass er nur für diese Email-Adresse funktioniert.
In etwa so: <a href="mailto:office@xyz.at" style="a:hover:color=#e09900;">office@xyz.at</a> Nur das er funktioniert und nicht wie meiner für die Tonne ist 😉
Vielen Dank
[...] Ich bräuchte diesen hover Effekt auch nochmal nur in diesem a-Tag, [...]
Kein Problem, Du musst nur dafür sorgen, dass ein a-Tag ein Alleinstellungsmerkmal bekommt. Das kann z. B. eine ID sein oder, in Deinem Fall besser, eine CSS Klasse.
Ein Objekt dem eine Klasse zugewiesen wird, kannst Du separat formatieren, ihm also z. B. bei einem MouseOver Ereignis eine individuelle Farbe zuweisen.
So sieht die Zuweisung aus:
<a class=mail href="mailto:office@xyz.at">office@xyz.at</a>
Hier wird einem dezidierten mailto Objekt die Klasse "mail" zugewiesen, wobei der Klassenname beliebig gewählt werden kann...
Die CSS Style Anweisung sieht jetzt so aus:
<style> .mail:hover {color: #e09900;} </style>
Die Anweisung ".mail:hover {color: #e09900;}" bezieht sich ausschließlich auf die Objekte, denen die Klasse "mail" zugewiesen wurde. Das kann ein einzelnes Objekt sein oder beliebig viele.
So kann das Ergebnis aussehen: