Bevor ich mich an die Entwicklung eines Widgets bzw. deren Erweiterung wage, möchte ich noch einiges mehr verstanden und gemacht haben. Z. B. CSS.
Einfache Korrekturvorschläge/Erweiterungen zu Adaptern habe ich schon getätigt und auch schon eine Idee für einen eigenen Adapter. Es kostet aber eben auch alles seine Zeit und da geht meine Bewunderung an Bluefox und den anderen, die sehr sehr viel Zeit in dieses Projekt investieren. Kriege da schon mal ein schlechtes Gewissen, aber es gibt im Leben leider nicht immer nur Hobby und Spass (zumindest in meinem nicht).
Zurück zum Mausüber - Hover-Effekt. Ich habe mir eine Menge Ideen und Lösungsansätze aus den Beispielprojekten und Skriptdiskussionen geholt. Und richtig, @kmxak:
Quasi so wie unter Instanzen auf das Farbsymbol die Maus halten um Detailinfos zu erhalten. ` , dass ist auch eine Inspiration, wie ich das gerne in meinem Projekt hätte. Wenn es so "einfach" perr CSS geht, dann würde sich ja vielleicht eine CSS-Skriptsammlung analog zu den JavaScript-Beispielen lohnen, ggf. mit Beispielen, wie es für die verschiedene Widget-Implementierungen umzusetzen wäre.
Wenn ich mir mit dem Chrome-Inspector das Status-Widget einer Instanz anschaue, sehe ich die "instance-id" und auch das meine Maus das Ereignis mit der Klasse "instance-state-hover" auslöst.
Mein Widget hat die id "w01008". Wie kann ich nun meinem Widget sagen, dass es beim Mouseover auche einen speziellen Text / Status anzeigt soll.
Ich habe verstanden, dass ich die unter dem Tab CSS definierte Klasse (welche u. U. eine vorhande Klasse überschreibt)
.hq-button-green-normal {
background: red !important;
box-shadow: inset 3px 2px 7px 0px #BB1111 !important;
border: 1px solid #aa1111 !important;
}
einem spezifischen Widget über die Eigenschaft "CSS-Klasse" zuweise bzw. in in diesem Fall über eine Style-Eigenschaft mit dem selben Namen "button-green-normal"
Was bedeutet dann
#w00236_button:hover{ /* der Button bei MouseOver */
border-color:red;
}
und wie wäre die entsprechende Klassendeklaration für mein hq-Widget "#w01008" ?
Wie kann ich die benötigten Informationen über die Chrome Dev-Tools ermitteln?
Oder gibt es nur den Weg "24 Tage mit CSS auf einer Insel"?
Hover for all! 😉
Bin dann leider über Ostern wieder offline.
