Class ändern bei Hover

[Sara]

Hallo,

ist es möglich wenn ich mit der Maus über das Wort fahre, dass das Icon im <span> eine andere Klasse bekommt?

<p><span class="fa fa-folder-o right"></span><a href="admin/settings">Einstellungen</a></p>

HTML möchte ich ungern umbauen, denn da hängen einige Abhängigkeiten dran. Vielleicht ist ja auch so möglich.

[Auge]

Hallo

ist es möglich wenn ich mit der Maus über das Wort fahre, dass das Icon im <span> eine andere Klasse bekommt?

<p><span class="fa fa-folder-o right"></span><a href="admin/settings">Einstellungen</a></p>

Nur mit JavaScript, du musst ja das DOM ändern.

HTML möchte ich ungern umbauen, denn da hängen einige Abhängigkeiten dran. Vielleicht ist ja auch so möglich.

Was du machen kannst, um JS zu vermeiden, ist, einen von den FontAwesome-Vorgaben unabhängigen Klassennamen zu wählen, das Icon darüber einzubinden und bei :hover ein anderes Icon anzuzeigen.

Tschö, Auge

[Sara]

Hallo,

Nur mit JavaScript, du musst ja das DOM ändern.

nur auf reine JavaScript Lösung möchte ich ungern setzten denn zum einen habe ich davon nur sehr wenig Ahnung und zum anderen muss ich rechnen dass JavaScript deaktiviert sein könnte. OK hier handelt sich sich um eine Spielerei, wer also JavaScript deaktiviert hat, würde den Effekt eben nicht sehen.

Was du machen kannst, um JS zu vermeiden, ist, einen von den FontAwesome-Vorgaben unabhängigen Klassennamen zu wählen, das Icon darüber einzubinden und bei :hover ein anderes Icon anzuzeigen.

Wäre es dann vielleicht nicht doch sinnvoll mein HTML umzubauen bevor ich Anfange zu tricksen?

[Sara]

Hallo,

Nur mit JavaScript, du musst ja das DOM ändern.

wollte es mit JavaScript versuchen

$(".test").hover(
	 function () {
		$(".right").toggleClass("result_hover")      
	 }
);

<p><span class="fa fa-folder-o right"></span><a href="admin/settings">Einstellungen</a></p>

.result_hover {
	color: red;
}

klappt auch zum Teil, nur jetzt bekommen alle .right die neue Klasse. Ist es irgendwie möglich nur das aktuelle .right zu ändern wo ich mich gerade aufhalte?

[Christian Kruse]

Hallo Sara,

$(".test").hover(
	 function () {
		$(".right").toggleClass("result_hover")      
	 }
);

<p><span class="fa fa-folder-o right"></span><a href="admin/settings">Einstellungen</a></p>

klappt auch zum Teil, nur jetzt bekommen alle .right die neue Klasse. Ist es irgendwie möglich nur das aktuelle .right zu ändern wo ich mich gerade aufhalte?

Ja, klar:

$(".test").on('hover', function() {
  $(this).prev('.right').toggleClass('result_hover');
});

LG,
CK

[Sara]

Hallo,

Ja, klar:

$(".test").on('hover', function() {
  $(this).prev('.right').toggleClass('result_hover');
});

danke für deinen Code, allerdings tut sich bei mir leider gar nichts :/

Update: So geht es

$(".test").hover(function() {
	$(this).prev('.right').toggleClass('result_hover');
});

[Christian Kruse]

Hallo Sara,

Update: So geht es

$(".test").hover(function() {
	$(this).prev('.right').toggleClass('result_hover');
});

Welche Version von jQuery benutzt du denn?

LG,
CK

[Sara]

Hallo,

Welche Version von jQuery benutzt du denn?

<script src="jquery-1.11.1.min.js"></script>

sollte ich vielleicht mal updaten? Ich habe Angst dass dann vielleicht nach dem Update ein paar Funktionen nicht mehr gehen.

[Christian Kruse]

Hallo Sara,

Welche Version von jQuery benutzt du denn?

<script src="jquery-1.11.1.min.js"></script>

sollte ich vielleicht mal updaten?

jQuery 1.11 ist ok wenn man die Browser-Kompatiblität für IE<=8 braucht. Wenn du die nicht mehr brauchst kannst du auch auf eine 2er updaten, aber einen Unterschied dürfte das hier nicht machen.

Ich wundere mich nur etwas: das .on() sollte schon auch gehen (zumal es die empfohlene Methode ist). Da muss noch irgend etwas anderes im Busch sein.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Ja, klar:

Nichts klar. Hast du den ganzen Thread verfolgt? Sara möchte keine Klasse ändern. Sie möchte stylen. Und keine Kätzchen töten.

$(".test").on('hover', function() { … });

Außerdem hast auch du den 'focus' verloren.

Und wenn hier unabhängig davon, dass JavaScript hier nicht das richtige Mittel zur Lösung des aktuellen Problems ist, ein Erkenntnisgewinn zu JavaScript vermittelt werden soll, dann hättest du gleich noch angeben können, wie man das ohne jQuery macht.

LLAP 🖖

[Sara]

Hallo,

Nichts klar. Hast du den ganzen Thread verfolgt? Sara möchte keine Klasse ändern. Sie möchte stylen. Und keine Kätzchen töten.

nein, du hast nicht recht. Ich wollte eine neue Klasse hinzufügen und da hat mir Christian erklärt. Sorry es geht nicht immer nach deinem Kopf oder nach irgendwelche Menschen die etwas auf Twitter schreiben.

Wie bereits geschrieben es ist nur eine optische Funktion, wenn kein JS aktiviert ist dann gibt es eben diesen Hover nicht.

Man muss sich nicht immer an irgendwelche Vorgaben halte die irgendwelche Besserwisser aufstellen und dann versuchen diese uns allen aufzudrücken. Man muss ab und an auch seinen eigenen Weg gehen.

Ich respektiere deine Meinung aber du solltest auch andere Meinungen akzeptieren, auch wenn diese NICHT in die Richtung gehen die vielleicht du für Sinnvoll hälst.

[Gunnar Bittersmann]

@@Sara

Ich wollte eine neue Klasse hinzufügen …

Wie bereits geschrieben es ist nur eine optische Funktion …

Du erkennst den Widerspruch, in den du dich da verstrickt hast?

Die „optische Funktion“ ist dein Problem (auch wenn ich das eher „visuellen Effekt“ benennen würde).

„Eine neue Klasse hinzufügen“ ist nicht dein Problem, sondern das, was du als gangbaren Lösungsweg für dein Problem ansiehst. Der Weg könnte auch für das Problem unpassend sein.

irgendwelche Besserwisser

Das nehm ich mal als Kompliment. Auch wenn du es anders meintest.

Man muss ab und an auch seinen eigenen Weg gehen.

Wenn du dich unbedingt verrennen willst …

Was dagegen spricht:

1. Performanz. Browser erledigen Stiländerungen mit dynamischen Pseudoklassen ohne mit der Wimper zu zucken. Änderungen des DOMs per JavaScript sind ungleich aufwendiger.

2. Verletzung von separation of concerns. Dadurch schlecht wartbarer Code. Bei späteren Stiländerungen wird man im Stylesheet suchen und nichts finden.

3. Einfachheit/Eleganz. Mehrere Zeilen JavaScript statt einer Zeile CSS? Auch das schlechter wartbarer Code.

Ich respektiere deine Meinung aber du solltest auch andere Meinungen akzeptieren

Ich respektiere durchaus andere Meinungen mit einem Hauch von Sinnhaftigkeit. Diese ist bei der Verwendung von JavaScript für dieses Problem nicht gegeben.

Sorry es geht nicht immer nach deinem Kopf oder nach irgendwelche Menschen die etwas auf Twitter schreiben.

Wieso oder? Willst du meine Persönlichkeit spalten?

LLAP 🖖

[Sara]

Hallo,

1. Performanz. Browser erledigen Stiländerungen mit dynamischen Pseudoklassen ohne mit der Wimper zu zucken. Änderungen des DOMs per JavaScript sind ungleich aufwendiger.

Eine Klasse mit jQuery hinzufügen oder ein Hover Befehl direkt ausführen wird man überhaupt nicht spüren solange es nicht überhand nimmt.

2. Verletzung von separation of concerns. Dadurch schlecht wartbarer Code. Bei späteren Stiländerungen wird man im Stylesheet suchen und nichts finden.

Warum? Ich füge nur eine Klasse hinzu, der Rest steht wieder im CSS. Ich werde ja wohl an meiner eigenen Seite wissen was ich gemacht habe?

3. Einfachheit/Eleganz. Mehrere Zeilen JavaScript statt einer Zeile CSS? Auch das schlechter wartbarer Code.

Weil man mit JavaScript einfach mehr Spielereien umsetzten kann?

Sorry es geht nicht immer nach deinem Kopf oder nach irgendwelche Menschen die etwas auf Twitter schreiben.

Weil du öfters auf irgendwelche Tweets verlinkst wo irgendjemand etwas gesagt hat und man sich danach richten soll.

[Gunnar Bittersmann]

@@Sara

1. Performanz. Browser erledigen Stiländerungen mit dynamischen Pseudoklassen ohne mit der Wimper zu zucken. Änderungen des DOMs per JavaScript sind ungleich aufwendiger.

Eine Klasse mit jQuery hinzufügen oder ein Hover Befehl direkt ausführen wird man überhaupt nicht spüren solange es nicht überhand nimmt.

Wenn du das jedes Mal sagst, summiert sich das, bis es doch überhand nimmt.

2. Verletzung von separation of concerns. Dadurch schlecht wartbarer Code. Bei späteren Stiländerungen wird man im Stylesheet suchen und nichts finden.

Warum? Ich füge nur eine Klasse hinzu, der Rest steht wieder im CSS.

Du kuckst ins CSS und verstehst nicht, wo die Klasse herkommt. Oder du kuckst ins JavaScript und verstehst nicht, was der Code bewirken soll.

Um das zu verstehen, musst du beides ansehen. Unnötige Komplexität.

Ich werde ja wohl an meiner eigenen Seite wissen was ich gemacht habe?

Auch in 2 Wochen noch? In 2 Monaten?

BTW, ich habe heute im Zuge eines Vortrags zu WebGL meinen Three.js-Code angesehen, den ich vor 2 Jahren geschrieben habe.^[1] Ich kann dir versichern, „an meiner eigenen Seite wissen was ich gemacht habe“ geht anders. ;-)

3. Einfachheit/Eleganz. Mehrere Zeilen JavaScript statt einer Zeile CSS? Auch das schlechter wartbarer Code.

Weil man mit JavaScript einfach mehr Spielereien umsetzten kann?

Unbestritten. Nur sagen das oft Leute, die nicht überblicken, was man mit CSS schon alles für Spielereien umsetzen kann.

Sorry es geht nicht immer nach deinem Kopf oder nach irgendwelche Menschen die etwas auf Twitter schreiben.

Weil du öfters auf irgendwelche Tweets verlinkst wo irgendjemand etwas gesagt hat und man sich danach richten soll.

Na siehste, es ist gar nicht so, dass ich anderen immer meine Meinung aufdrängeln würde. ;-)

Willst du mir glauben, dass ich bei den Themen, zu denen ich mich hier äußere, besser einschätzen kann, ob das Hand und Fuß hat, „wo irgendjemand etwas gesagt hat“?

LLAP 🖖

---

1. Mir war damal schon klar, dass das übler Spaghetti-Code ist. Codeblöcke für die vier Monde kopiert und Zahlen geändert anstatt das einmal für „Mond“ zu schreiben und viermal mit den entsprechenden Parametern aufzurufen. ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

… meinen Three.js-Code angesehen …

Pfeiltasten ▲/▼ bewegen die Kamera gegenüber der Bahnebene
Pfeiltasten ◀︎/▶︎ verändern den Abstand der Kamera

Größe des Jupiters und Abstände der Monde im selben Maßstab; die Monde sind vergrößert dargestellt.
Umlaufzeiten und Rotation des Jupiters im selben Zeitmaßstab schneller als in Wirklichkeit

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Pfeiltasten ▲/▼ bewegen die Kamera gegenüber der Bahnebene

richtig cool wäre, wenn man das auch am Jupiter selbst sähe und nicht nur an den Monden.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Pfeiltasten ▲/▼ bewegen die Kamera gegenüber der Bahnebene

richtig cool wäre, wenn man das auch am Jupiter selbst sähe und nicht nur an den Monden.

Sieht man doch. Wenn du die Kamera um 90° schwenkst und auf einen der Pole schaust, sieht du die Woleknbänder als konzentrische Kreise.

Oder etwa nicht? Gibt es Browser, die da nicht mitspielen?

LLAP 🖖

[Tabellenkalk]

Hallo,

Oder etwa nicht? Gibt es Browser, die da nicht mitspielen?

obwohl ich JS im FF zugelassen habe, sehe ich nur eine weiße Seite...

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

Oder etwa nicht? Gibt es Browser, die da nicht mitspielen?

obwohl ich JS im FF zugelassen habe, sehe ich nur eine weiße Seite...

Das hatte ich heute morgen unter XP auch …

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Sieht man doch.

Jetzt ja.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Sieht man doch.

Jetzt ja.

Ich hab nicht’s gemacht. (Außer dich drauf hinzuweisen, dass man’s sieht.)

LLAP 🖖

[Der Martin]

Hallo,

nicht’s

autsch! Apostrophitis im fortgeschrittenen Stadium?

*scnr*,
 Martin

[Gunnar Bittersmann]

@@Der Martin

nicht’s

autsch! Apostrophitis im fortgeschrittenen Stadium?

Aua!!1elf Da war ich wohl schon beim „man’s“. Na wenigstens hab ich nicht ' verwendet! ;-)

Das kommt davon, wenn man nicht alle beisammen hat. 95% meiner Aufmerksamkeit ist gerade beim Workshop Interface Animation for the Web. Der wäre auch besonders für dich interessant gewesen!

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Workshop Interface Animation for the Web. Der wäre auch besonders für dich interessant gewesen!

Wie auch ihr Artikel UI Animation and UX: A Not-So-Secret Friendship auf A List Apart.

LLAP 🖖

[Orlok]

Hallo Gunnar

Ich habe heute im Zuge eines Vortrags zu WebGL meinen Three.js-Code angesehen, den ich vor 2 Jahren geschrieben habe.

Na hoffentlich hast du bei dem Vortrag gut aufgepasst. ;-)

Aber dein Jupiter schaut schonmal nicht schlecht aus, auch wenn du dafür Three.js eigentlich nicht hättest bemühen müssen:

Ich hatte vor einiger Zeit mal ein komplettes Sonnensystem gebastelt und habe mich beim Lesen deines Beitrags daran erinnert. – Leider aber nicht mehr daran, wo ich die Datei gespeichert habe! ;-)

Aber da ich beim Artikelschreiben im Moment eine Schreibblockade habe und ich ohnehin mal ausprobieren wollte, wie das mit der Erstellung von Beispielseiten im Wiki so funktioniert, habe ich mal meine eigene Interpretation des Themas erstellt: Jupiter und Monde

Ohne Three.js. Just WebGL. :-)

Jetzt müsste ich nur noch herausfinden, warum mein Slider zur Steuerung der Geschwindigkeit der Animation in Firefox und Opera tadellos funktioniert, im Internet Explorer 11 aber nicht.

Naja, wie auch immer... ;-)

Gruß,

Orlok

[Matthias Scharwies]

Servus!

... habe ich mal meine eigene Interpretation des Themas erstellt: Jupiter und Monde

Sieht super aus!

Könnte das nicht der Beginn eines Wiki-Artikels über WebGL werden? :-)

Herzliche Grüße

Matthias Scharwies

[Orlok]

@Matthias Scharwies

Könnte das nicht der Beginn eines Wiki-Artikels über WebGL werden? :-)

Eher das Ende. ;-)

Dass zu WebGL im Wiki bislang noch gar keine Seite existiert ist in der Tat schade, zumal es zu dem Thema insbesondere im deutschsprachigen Raum ohnehin kaum brauchbare Artikel, Tutorials oder Dokumentationen gibt.

Aber dafür gibt es natürlich auch Gründe, denn das Thema ist nämlich, wie Gunnar unlängst festgestellt hat, extrem komplex, was vor allem daran liegt, dass die Schnittstelle WebGL entgegen der allgemeinen Ansicht keine 3D-API darstellt:

„WebGL only cares about two things. Clipspace coordinates and colors.“ [Gregg Tavares]

Das bedeutet, WebGL bietet lediglich eine gewisse Basisfunktionalität, welche die Erstellung einer 3D-Szene ermöglicht, aber es gibt hier zum Beispiel keine eingebauten Funktionen um dreidimensionale Objekte zu erzeugen, also etwa nach dem Schema…

var sphere = WebGLRenderingContext.createSphere({
  bands : 50, radius : 1, center : [2.0, 1.5, 0.0], color : 'red'
});

…genausowenig wie Funktionen existieren, die dem Programmierer etwa die Implementierung eines Beleuchtungsmodells abnehmen, Partikeleffekte erzeugen oder die Animation von Objekten erleichtern würden.

Im Ergebnis ist die Arbeit mit WebGL also klassische Grafikprogrammierung, das heißt, ein Artikel oder gar eine Dokumentation zu WebGL wäre ziemlich nutzlos, wenn nicht auch gleichzeitig (wenigstens) die Grundlagen dieses Teilbereichs der Informatik mitvermittelt würden.

Womit wir dann beim Kern des Problems angelangt wären: Grafikprogrammierung ist ein sehr weites Feld und selbst die Grundlagen füllen beispielsweise im Bachelorstudium Informatik bereits zwei komplette Vorlesungsreihen, wobei auch diese Vorlesungen wirklich nur einen sehr groben Überblick über das Thema gewähren, soweit ich das nach Ansicht der Lehrpläne beurteilen kann…

Ich kann also höchstens anbieten, dass ich – nachdem die wichtigeren Baustellen in der JavaScript-Sektion soweit abgearbeitet sind – eine kurze Einführung zum Thema WebGL schreibe, vielleicht anhand eines sehr simplen Beispiels die grundlegende Funktionalität der Schnittstelle erläutere und dabei versuche, zumindest ein wenig Grundlagenwissen zum Thema Grafikprogrammierung zu vermitteln.

Eine richtige Dokumentation der Schnittstelle, brauchbare Tutorials zu deren Verwendung und Artikel zu den mathematischen und sonstigen theoretischen Grundlagen mit anschaulichen Beispielen und allem was darüber hinaus noch so dazu gehört – das alles ist meiner Ansicht nach kaum zu verwirklichen, zumal selbst die entsprechenden Dokumentationen im MDN oder MSDN ein totaler Witz sind…

Gruß,

Orlok

[Gunnar Bittersmann]

@@Orlok

Aber dein Jupiter schaut schonmal nicht schlecht aus, auch wenn du dafür Three.js eigentlich nicht hättest bemühen müssen:

Ich hatte nach einigen Minuten WebGL-Quellen lesen entschieden, dass WebGL (zu) unhandlich ist, um mal eben damit loszulegen. Eine draufgesetzte Bibliothek, die die Unhandlichkeit von WebGL wegkapselt, fand ich dafür schon äußerst angenehm.

Ich hatte früher mal an einem 3D-Projekt gearbeitet und war auch heilfroh, dass das in OpenSG war und nicht in OpenGL.

habe ich mal meine eigene Interpretation des Themas erstellt: Jupiter und Monde

Wow, was ein bisschen (direktes) Licht so ausmacht!

Aber he, wo sind die Schatten, die die Monde auf den Jupiter werfen? Und andersrum?

Explorer 11

Explorer? Du meinst Pioneer 11? ;-)

LLAP 🖖

[Gunnar Bittersmann]

@@Orlok

Jupiter und Monde

Dein Jupiter rotiert langsamer als die Monde umlaufen (selbst Callisto), das ist in der Realität völlig anders.

Und die Größen und Abstände scheinen bei dir auch nicht maßstabsgerecht zu sein; die Monde wirken viel zu nah am Jupiter dran.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

ich habe jetzt drei Tage überlegt, wie ich dir am besten Antworte. Mir ist nichts sinnvolles eingefallen, deshalb schreib ichs mal gerade heraus. Ich habe mich über deinen Beitrag hier sehr geärgert.

Nichts klar. Hast du den ganzen Thread verfolgt? Sara möchte keine Klasse ändern. Sie möchte stylen. Und keine Kätzchen töten.

Nicht jeder beantwortet Fragen so wie du es tust. Der Hinweis, dass man das besser via CSS macht, wurde bereits vor meinem Posting gegeben. Und das ist kein Grund, die Frage nicht zu beantworten. Die Wahl der Mittel bleibt dem OP überlassen. Das mag dir nicht passen, aber das ist kein Grund mich so anzuraunzen.

Und wenn hier unabhängig davon, dass JavaScript hier nicht das richtige Mittel zur Lösung des aktuellen Problems ist, ein Erkenntnisgewinn zu JavaScript vermittelt werden soll, dann hättest du gleich noch angeben können, wie man das ohne jQuery macht.

Erstens wurde explizit jQuery verwendet und zweitens: Nein.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Mir ist nichts sinnvolles eingefallen, deshalb schreib ichs mal gerade heraus.

Warum sollte gerade heraus nicht sinnvoll sein?

Der Hinweis, dass man das besser via CSS macht, wurde bereits vor meinem Posting gegeben.

Dann verstehe ich deine Intention nicht, den schlechten Weg mit JavaScript hier noch lang und breit auszutreten.

aber das ist kein Grund mich so anzuraunzen.

Du weißt doch, dass ich hier niemanden persönlich anraunze, sondern Beiträge, über die ich mich hier ärgere.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Mir ist nichts sinnvolles eingefallen, deshalb schreib ichs mal gerade heraus.

Warum sollte gerade heraus nicht sinnvoll sein?

Weil es den Ton im Forum verschlechtert und ggfls persönliche Ressentiments schafft.

Der Hinweis, dass man das besser via CSS macht, wurde bereits vor meinem Posting gegeben.

Dann verstehe ich deine Intention nicht, den schlechten Weg mit JavaScript hier noch lang und breit auszutreten.

Ich finde den Antwortstil auf Fragen nicht zu antworten weil es nicht den best practices entspricht nicht gut. Einerseits muss man Menschen ihre eigenen Fehler machen lassen und andererseits sorgt es für einen schlechten Ruf dieses Forums. Und jetzt kommt mir nicht mit der üblichen Leier, dass das ja gerade der Vorteil dieses Forums sei.

aber das ist kein Grund mich so anzuraunzen.

Du weißt doch, dass ich hier niemanden persönlich anraunze, sondern Beiträge, [...]

Das macht kaum einen Unterschied.

[...] über die ich mich hier ärgere.

Das ist genau der Punkt, über den ich mich so geärgert habe.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Disclaimer: Der geneigte Leser mag nach Gutdünken Smileys, Ironie- und Sarkasmus-Tags über die folgenden Sätze verteilen, um ihre Form abzuschwächen. Nicht aber ihren Inhalt.

Warum sollte gerade heraus nicht sinnvoll sein?

Weil es den Ton im Forum verschlechtert und ggfls persönliche Ressentiments schafft.

Also sagen wir lieber alles durch die Blume‽ Statt „Sollte man nicht so machen“ besser „Kann man so machen. Ist dann aber Kacke.“

Nicht meine Art. Hab ja nur 12-Klassen-Abitur. Wir Ossis hatten ja kein Schauspielunterricht.

Ich finde den Antwortstil auf Fragen nicht zu antworten weil es nicht den best practices entspricht nicht gut. Einerseits muss man Menschen ihre eigenen Fehler machen lassen und andererseits sorgt es für einen schlechten Ruf dieses Forums.

Ob der Ruf schlecht ist, liegt im Auge des Betrachters. Zumindest hat dieses Forum ihn schon sehr lange.

Du weißt doch, dass ich hier niemanden persönlich anraunze, sondern Beiträge, [...]

Das macht kaum einen Unterschied.

Für mich macht das einen gewaltigen Unterschied. „Du bist total bekloppt“ ist eine ganz andere Aussage als „Dieser Beitrag von dir ist total bekloppt“.

[...] über die ich mich hier ärgere.

Das ist genau der Punkt, über den ich mich so geärgert habe.

Du hat dich darüber geärgert, dass ich mich geärgert habe? Musst du nicht.

Oder hast du dich darüber geärgert, dass ich meinem Ärger Luft gemacht habe? Müsste ich mich jetzt darüber ärgern, dass du deinem Ärger Luft gemacht hast? Tu ich nicht.

LLAP 🖖

[Tabellenkalk]

Hallo,

ist es möglich wenn ich mit der Maus über das Wort fahre, dass das Icon im <span> eine andere Klasse bekommt?

was ist denn der Zweck der Übung? Suchst du vielleicht Sprites?

Gruß
Kalk

[Sara]

Hallo,

was ist denn der Zweck der Übung? Suchst du vielleicht Sprites?

Sprites kann ich ja nur nutzen, wenn ich Grafiken habe. Ich nutzte die Font-Awesome Icons.

Die Übung? Ich habe einen kleinen Admin Bereich dem möchte ich gerne etwas Farbe spendieren :) Derzeit ist alles nur S/W. Wenn ich mit der Maus über einen Nav Punkte fahre soll das Icon von S/W in z.B. rot geändert werden.

[henman]

Servus Sara

Die Übung? Ich habe einen kleinen Admin Bereich dem möchte ich gerne etwas Farbe spendieren :) Derzeit ist alles nur S/W. Wenn ich mit der Maus über einen Nav Punkte fahre soll das Icon von S/W in z.B. rot geändert werden.

Hast du schon probiert, die Schriftfarbe des Elements per Pseudoklasse :hover zu ändern?

ciao

[Sara]

Hallo,

Hast du schon probiert, die Schriftfarbe des Elements per Pseudoklasse :hover zu ändern?

bis jetzt noch nicht. Ist es denn möglich wenn ich über den Link fahre dass dann nur das Icon geändert wird?

<p><span class="fa fa-folder-o right"></span><a href="admin/settings">Einstellungen</a></p>

Ich kann auch einfach eine weitere Klasse hinzufügen und dort dann color:red hinzufügen und standardmäßig ist sie black. Dann wären meine Probleme gelöst :)

[Matthias Apsel]

Hallo Sara,

bis jetzt noch nicht. Ist es denn möglich wenn ich über den Link fahre dass dann nur das Icon geändert wird?

<p><span class="fa fa-folder-o right"></span><a href="admin/settings">Einstellungen</a></p>

Nein. nur wenn du über das p-Element hoverst ;-)

Ich kann auch einfach eine weitere Klasse hinzufügen und dort dann color:red hinzufügen und standardmäßig ist sie black. Dann wären meine Probleme gelöst :)

besser vielleicht

p > .fa-folder-o {
  color: inherit; /* Schriftfarbe des Absatzes */
}
p:hover > .fa-folder-o {
  color: red;
}

Ich würde dem p-Element eine Klasse geben und dann

.klassenname > span {
  color: inherit; /* Schriftfarbe des Absatzes */
}
.klassenname:hover > span {
  color: red;
}

Bis demnächst
Matthias

[henman]

Servus Sara

Hast du schon probiert, die Schriftfarbe des Elements per Pseudoklasse :hover zu ändern?

bis jetzt noch nicht. Ist es denn möglich wenn ich über den Link fahre dass dann nur das Icon geändert wird?

Kennst du Kindselektoren in CSS?

/* beispiel */
a:hover .fa{
    color:red /* evtl. mit !important nachhelfen oder andere klasse als Kindselektor nutzen */
}

<p><span class="fa fa-folder-o right"></span><a href="admin/settings">Einstellungen</a></p>

Ich kann auch einfach eine weitere Klasse hinzufügen und dort dann color:red hinzufügen und standardmäßig ist sie black. Dann wären meine Probleme gelöst :)

In deinem ersten Post meintest du, das HTML nicht gern ändern zu wollen, aber wenn du meinst...

ciao

[henman]

Servus henman

/* beispiel */
a:hover .fa{
    color:red /* evtl. mit !important nachhelfen oder andere klasse als Kindselektor nutzen */
}

mist, p:hover meinte ich

ciao

[Auge]

Hallo

Hast du schon probiert, die Schriftfarbe des Elements per Pseudoklasse :hover zu ändern?

bis jetzt noch nicht. Ist es denn möglich wenn ich über den Link fahre dass dann nur das Icon geändert wird?

In deiner Konstruktion nicht, denn das span, mit dem das Icon ausgegeben wird, gehört nicht zum Link.

<p><span class="fa fa-folder-o right"></span><a href="admin/settings">Einstellungen</a></p>

Aber selbst, wenn das span Kind des Links wäre, könnten ohne weitere Maßnahmen nur beide zusammen die Farbe wechseln. Mit dem Code …

<p><a href="admin/settings"><span class="fa fa-folder-o right"></span>Einstellungen</a></p>

… und …

a:focus, a:hover {
color: red;
}

… ändert das Icon beim fokussieren oder hovern des Links zusammen mit dessen Text die Farbe. Du kannst aber zusätzlich explizite Angaben machen, die beide Bestandteile unterschiedlich färben. Dazu brauchst du aber ein zusätzliches HTML-Element, was evtl. ungewünscht ist.

<p><a href="admin/settings"><span class="fa fa-folder-o right"></span><span class="linktext">Einstellungen<span></a></p>

… wird beim hovern mit folgenden Regeln …

a:focus, a:hover {
color: red;
}
a:focus .linktext, a:hover .linktext {
color: black;
}

… zweifarbig.

Du solltest dich spätestens dann mit SVG beschäftigen, wenn der Wunsch nach mehrfarbigen Icons auftaucht. Vorher kann es natürlich auch nicht schaden. Da es sich dabei um einen XML-Dialekt handelt, steht dir dort grundsätzlich auch CSS zur Verfügung.

Tschö, Auge

[Tabellenkalk]

Hallo,

bis jetzt noch nicht. Ist es denn möglich wenn ich über den Link fahre dass dann nur das Icon geändert wird?

<p><span class="fa fa-folder-o right"></span><a href="admin/settings">Einstellungen</a></p>

man könnte mit a::hover::before interessante Effekte erzielen.

Gruß
Kalk

[Sara]

Hallo,

man könnte mit a::hover::before interessante Effekte erzielen.

dazu habe ich hier http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter etwas gefunden, mal schauen ob ich dieses für mich verwenden kann.

[Gunnar Bittersmann]

@@Tabellenkalk

Suchst du vielleicht Sprites?

Nein, Sprites.

LLAP 🖖

[Gunnar Bittersmann]

@@Sara

ist es möglich wenn ich mit der Maus über das Wort fahre, dass das Icon im <span> eine andere Klasse bekommt?

Du möchtest beim Hovern^[1] des Links ein Icon außerhalb des Links ändern? Und beim Hovern des Icons passiert nichts? Und das Icon ist auch nicht clickbar? Das hört sich für mich nach schlechtem UI-Design an.

Ich denke, das Icon sollte Teil des Links sein.

HTML möchte ich ungern umbauen,

Dazu musst du das HTML umbauen:

<p><a href="admin/settings"><span class="fa fa-folder-o right"></span>Einstellungen</a></p>

Und du möchtest dem Icon keine andere Klasse geben, sondern es anders stylen: bei obigem Markup bspw. per

a:hover .fa, a:focus .fa { … }

Dann ist es auch anclickbar und ändert auch seinen Stil, wenn es selbst gehovert wird. Und auch, wenn der Link den Fokus erhält.

LLAP 🖖

---

1. Und was ist bei Tastaturbedienung? Wenn man an :hover denkt, sollte man :focus nicht vergessen. ↩︎

[Sara]

Hallo,

Du möchtest beim Hovern[^1] des Links ein Icon außerhalb des Links ändern? Und beim Hovern des Icons passiert nichts? Und das Icon ist auch nicht clickbar? Das hört sich für mich nach schlechtem UI-Design an.

Habe ich mir auch schon überlegt bzw. hatte es auch so umgesetzt:

<p><a href="admin/settings"><span class="fa fa-folder-o right"></span>Einstellungen</a></p>

Allerdings sieht das Icon unschön aus, wenn es auch unterstrichen wird beim Hovern. Der Link darf ruhig unterstrichen werden, das Icon sollte ohne Unterstrich bleiben. Deshalb habe ich es wieder aus dem <a> herausgenommen

[Christian Kruse]

Hallo Sara,

Habe ich mir auch schon überlegt bzw. hatte es auch so umgesetzt:

<p><a href="admin/settings"><span class="fa fa-folder-o right"></span>Einstellungen</a></p>

Allerdings sieht das Icon unschön aus, wenn es auch unterstrichen wird beim Hovern.

Dann mach doch eine Extra-Regel, die dort das text-decoration überschreibt:

a:hover, a:focus {
  text-decoration:underline;
  color:#f00;
}

a:hover .fa::before, a:focus .fa::before {
  text-decoration:none;
}

Das ::before habe ich hier genommen, weil FontAwesome das Icon via ::before einfügt.

LG,
CK

[Sara]

Hallo,

Dann mach doch eine Extra-Regel, die dort das text-decoration überschreibt:

a:hover, a:focus {
  text-decoration:underline;
  color:#f00;
}

a:hover .fa::before, a:focus .fa::before {
  text-decoration:none;
}

Das ::before habe ich hier genommen, weil FontAwesome das Icon via ::before einfügt.

danke für das Beispiel, versuche ich gleich mal umzusetzen.

[Gunnar Bittersmann]

@@Sara

danke für das Beispiel, versuche ich gleich mal umzusetzen.

Viel Glück! 😈

LLAP 🖖

[Gunnar Bittersmann]

@@Christian Kruse

Dann mach doch eine Extra-Regel, die dort das text-decoration überschreibt:

Ähm, eine vorhandene Linie mit nichts zudecken‽

Du solltest mehr Frontend machen. Oder gar keins mehr. ;-)

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Dann mach doch eine Extra-Regel, die dort das text-decoration überschreibt:

Ähm, eine vorhandene Linie mit nichts zudecken‽

Stimmt, da habe ich nicht genug drüber nachgedacht.

LG,
CK

[Gunnar Bittersmann]

@@Sara

Allerdings sieht das Icon unschön aus, wenn es auch unterstrichen wird beim Hovern. Der Link darf ruhig unterstrichen werden, das Icon sollte ohne Unterstrich bleiben.

Dann musst du wohl den Linktext in ein eigenes Element (span) tun, die Unterstreichung dieses a-Elements entfernen (text-decoration: none) und eine Unterstreichung für den Linktext machen (text-decoration: underline).

Deshalb habe ich es wieder aus dem <a> herausgenommen

Das Markup zum Zwecke des Stylens umzubauen ist selten eine gute Idee. Schon gar nicht, wenn man es dabei kaputtmacht.

LLAP 🖖

[Sara]

Hallo,

Das Markup zum Zwecke des Stylens umzubauen ist selten eine gute Idee. Schon gar nicht, wenn man es dabei kaputtmacht.

das ganze sieht aktuell so aus

ob hier jetzt der Ordner verlinkt ist oder nicht spielt absolut keine Rolle. Jeder klar denkende Mensch klickt auf die Bezeichnung und nicht sofort auf das Icon?

[Gunnar Bittersmann]

@@Sara

ob hier jetzt der Ordner verlinkt ist oder nicht spielt absolut keine Rolle. Jeder klar denkende Mensch klickt auf die Bezeichnung und nicht sofort auf das Icon?

Jede(r) klar denkende Entwickler(in) geht nicht davon aus, dass sich Nutzer genau so verhalten, wie sie/er sich das vorstellt.

Spätestens, wenn ich sehe, dass sich beim Hovern eines Links das Icon ändert, erwarte ich, dass man auch das Icon anclicken kann.

LLAP 🖖

[Sara]

Hallo,

Jede(r) klar denkende Entwickler(in) geht nicht davon aus, dass sich Nutzer genau so verhalten, wie sie/er sich das vorstellt.

dann sollte man die User so erziehen dass sie klicken wo der Entwickler(in) es gerne hätte :)

Spätestens, wenn ich sehe, dass sich beim Hovern eines Links das Icon ändert, erwarte ich, dass man auch das Icon anclicken kann.

OK, überzeugt ich werde es mit CSS ändern.

[bobby]

Moin,

das ganze sieht aktuell so aus

Warum arbeitest du hier nicht mit einer Hintergrundgrafik? Wäre viel einfacher und zweckmäßiger.

ob hier jetzt der Ordner verlinkt ist oder nicht spielt absolut keine Rolle. Jeder klar denkende Mensch klickt auf die Bezeichnung und nicht sofort auf das Icon?

Oh. Da verlangst du zuviel vom DAU. Das Icon sollte unbedingt anklickbar sein.

Gruß Bobby

[Gunnar Bittersmann]

@@bobby

Warum arbeitest du hier nicht mit einer Hintergrundgrafik? Wäre viel einfacher und zweckmäßiger.

Nein, weder noch.

Die Grafik soll sich ja ändern können. Hintergrund-SVG-Grafiken kann man nicht von außen stylen. Man würde zwei getrennte Grafiken benötigen und deren Aussehen (Farben) in den Grafikdateien festlegen müssen anstatt im Stylesheet.

Bei <a …><svg class="icon" …><use …/></svg> …</a> braucht man nur eine Grafik (symbol) pro Icon (ein SVG für alle Icons) und kann im Stylesheet deren Farben angeben:

.icon
{
  stroke: …;
  fill: …;
}

a:hover .icon, a:focus .icon
{
  stroke: …;
  fill: …;
}

SVG Sprites vs. Icon-Fonts hatte ich bereits verlinkt; darin finden sich Links zu Artikeln von Chris Coyier, von dort kommt man auch zu SVG symbol a Good Choice for Icons.

LLAP 🖖

[Sara]

Hallo und guten Morgen,

hier wurde immer wiede von SVG Grafiken geschrieben. Wenn ich mich für ein SVG Folder entscheide: http://www.flaticon.com/free-icon/open-archive_73581#term=folder&page=1&position=7 ganz unten gibt es ein Button SVG FILE sollte ich diese Grafik einbinden? Wenn ja benötige ich die Grafik zweimal einmal in S/W und einmal in Grün. Also verbrauche ich viel mehr Speicherplatz?

[Auge]

Hallo

hier wurde immer wiede von SVG Grafiken geschrieben. Wenn ich mich für ein SVG Folder entscheide: http://www.flaticon.com/free-icon/open-archive_73581#term=folder&page=1&position=7 ganz unten gibt es ein Button SVG FILE sollte ich diese Grafik einbinden? Wenn ja benötige ich die Grafik zweimal einmal in S/W und einmal in Grün. Also verbrauche ich viel mehr Speicherplatz?

Die SVG-Grafik sollte einerseits mit wenigen Kilobyte auskommen und ist, wie ich schon schrieb, XML und damit für CSS-Regeln zugänglich. Bindest du die Grafik mit <img src="bla/folder.svg" alt=""> ein, kannst du für a img[src$=".svg"] und a:hover img[src$=".svg"] unterschiedliche Regeln festlegen.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Die SVG-Grafik sollte einerseits mit wenigen Kilobyte auskommen und ist, wie ich schon schrieb, XML und damit für CSS-Regeln zugänglich. Bindest du die Grafik mit <img src="bla/folder.svg" alt=""> ein, kannst du für a img[src$=".svg"] und a:hover img[src$=".svg"] unterschiedliche Regeln festlegen.

Nein. Per img eingebundene SVGs sind ebensowenig wie Hintergrund-SVGs von außen stylebar.

Siehe Tabelle unter Embedding SVGs in Sara Soueidans SmashingMag-Artikel „Styling And Animating SVGs With CSS“

LLAP 🖖

[Gunnar Bittersmann]

@@Sara

benötige ich die Grafik zweimal einmal in S/W und einmal in Grün.

Ich hatte eben schon geschrieben, dass dies bei SVG nicht der Fall ist (wenn man’s richtig macht).

Also verbrauche ich viel mehr Speicherplatz?

SVG-Dateien (ein bisschen Text) sind oft kleiner als Pixelgrafiken.

LLAP 🖖