Mit :hover einen Text einblenden

[Jana]

Hallo,

ich versuche mich gerade hobbymäßig an einer Website und stelle mich bei dem hover-effekt irgendwie ein bisschen blöd an... Mein Ziel ist es, dass ich einen mouseover-effekt bekomme, wenn ich über ein Bild id="Asien" (hat auch eine Verlinkung zu einer anderen Seite, liegt es vielleicht daran?) drüberfahre und sich dann ein Text id="X" zeigt. Könnt ihr mir helfen?

CSS:

		#Asien:hover #X {display: block}
		#X {display: none}

HTML:

	<a href='Asien/Asien.html'> <img src='Bilder/Stecker.png' 
	id='Asien'> </img> </a> </figure>
	
	<div id='X'> Test </div>

Danke auf jeden Fall :)

[Matthias Apsel]

Hallo Jana,

#Asien:hover #X {display: block}

Das Leerzeichen zwischen r und # ist der Nachfahrenselektor.

  <a href='Asien/Asien.html'> 
    <img src='Bilder/Stecker.png' id='Asien'> </img> 
  </a> 
</figure>
	
<div id='X'> Test </div>

Das div-Element ist aber kein Nachfahre des img-Elemtes, welches im übrigen kein End-Tag haben darf. Es ist mit dem img-Element nur sehr weitläufig (Großtante) verwandt.

Danke auf jeden Fall :)

Schau dich in unserem Wiki um und frag gern wieder nach, wenn du etwas nicht verstehst. Auf die ID-Selektoren solltest du auch verzichten.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Auf die ID-Selektoren solltest du auch verzichten.

?? Warum?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Auf die ID-Selektoren solltest du auch verzichten.

?? Warum?

Weil man Selektoren nur so spezifisch wie nötig machen soll?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Auf die ID-Selektoren solltest du auch verzichten.

?? Warum?

Weil man Selektoren nur so spezifisch wie nötig machen soll?

Wenn man ein ganz bestimmtes Element stylen möchte, ist die Spezifität (1, 0, 0) genau richtig.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Jana

Mein Ziel ist es, dass ich einen mouseover-effekt bekomme

Bedenke, dass viele (wenn nicht gar die meisten) Nutzer überhaupt keinen Mouseover-Effekt zu sehen bekommen.

Wozu soll die Anzeige überhaupt gut sein? Und warum nimmst du nicht das title-Attribut?

#Asien:hover #X selektiert ein Element mit der ID ‚X‘, welches ein Nachfahrenelement eines gehoverten Elements mit der ID ‚Asien‘ ist. Das heißt: ‚X‘ innerhalb von ‚Asien‘.

Da das bei

	<a href='Asien/Asien.html'> <img src='Bilder/Stecker.png' 
	id='Asien'> </img> </a> </figure>
	
	<div id='X'> Test </div>

nicht der Fall ist, gibt es keine Anzeige bei Hover.

Was fehlt: Der Alternativtext für das Bild (vermutlich alt="Asien").

Was weg muss: das </img>-End-Tag.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Jana]

Danke für eure Antworten. Jetzt habe ich meinen Fehler beim Hover und insgesamt beim img-tag verstanden, danke. Wie müsste ich meinen Body strukturieren, wenn ich 'X' beim mouseover über 'Asien' anzeigen wollen würde?

@Gunnar Bittersmann

Bedenke, dass viele (wenn nicht gar die meisten) Nutzer überhaupt keinen Mouseover-Effekt zu sehen bekommen.

Das wusste ich garnicht. Gibt es eine Alternative, die mehr Nutzer sehen? Ich habe das Gefühl, dass die meisten Wesiten irgendwie auf Mausbewegungen reagieren, mit welchem Effekt arbeitet man da meist?

Wozu soll die Anzeige überhaupt gut sein? Und warum nimmst du nicht das title-Attribut?

Die Anzeige hat keinen so speziellen Sinn, ich will es nur probieren und da es nicht so funktioniert wie geplant auf jeden Fall verstehen. Auf die Idee, es in das title-attribut zu legen bin ich garnicht gekommen, kann mir es aber auch nicht vorstellen, wie und wieso ich es dorthin schreiben könnte, kannst du mir das vielleicht erklären?

Bin wirklich eine absolute Anfängerin und dankbar für jede Hilfe.

[Matthias Scharwies]

Servus!

Danke für eure Antworten. Jetzt habe ich meinen Fehler beim Hover und insgesamt beim img-tag verstanden, danke. Wie müsste ich meinen Body strukturieren, wenn ich 'X' beim mouseover über 'Asien' anzeigen wollen würde?

@Gunnar Bittersmann

Bedenke, dass viele (wenn nicht gar die meisten) Nutzer überhaupt keinen Mouseover-Effekt zu sehen bekommen.

Das wusste ich garnicht.

Gibt es eine Alternative, die mehr Nutzer sehen? Ich habe das Gefühl, dass die meisten Wesiten irgendwie auf Mausbewegungen reagieren, mit welchem Effekt arbeitet man da meist?

Den mouseover-Effekt sehen halt nur Nutzer mit einer Maus (und einem Desktop). Mehr als die Hälfte der Nutzer surfen mit einem Tablet oder einen Smartphone. Dort gibt es Touch-Events.

Wozu soll die Anzeige überhaupt gut sein? Und warum nimmst du nicht das title-Attribut?

Die Anzeige hat keinen so speziellen Sinn, ich will es nur probieren und da es nicht so funktioniert wie geplant auf jeden Fall verstehen. Auf die Idee, es in das title-attribut zu legen bin ich garnicht gekommen, kann mir es aber auch nicht vorstellen, wie und wieso ich es dorthin schreiben könnte, kannst du mir das vielleicht erklären?

• CSS/Tutorials/Tooltips_mit_CSS

Bin wirklich eine absolute Anfängerin und dankbar für jede Hilfe.

Kein Problem, wir haben alle mal angefangen!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Jana

Danke für eure Antworten. Jetzt habe ich meinen Fehler beim Hover und insgesamt beim img-tag verstanden, danke. Wie müsste ich meinen Body strukturieren, wenn ich 'X' beim mouseover über 'Asien' anzeigen wollen würde?

Was für den Hovereffekt ginge:

<a href='Asien/Asien.html'>
  <img src='Bilder/Stecker.png' alt='Asien' id='Asien'>
  <div id='X'> Test </div>
</a>

#Asien:hover + #X {display: block}

Durch den +-Kombinator wird ‚X‘ als unmittelbar nachfolgendes Geschwisterelement des gehoverten ‚Asien‘ selektiert. (Der ~-Kombinator ginge auch; das selektiert auch weiter entfernte Geschwisterelemente. )

Aber nein, so nicht machen!

Wie schon erwähnt gibt es ja nicht nur Mäuse; etliche Nutzer verwenden die Tastaur (Pfeiltasten, Tab-Taste, …). Dabei geraten Elemente in den Fokus, was sich in CSS mit der Pseudoklasse :focus nutzen lässt. Faustregel: Was du für :hover tust, mach auch für :focus. (Es sei denn, man macht für :focus etwas Anderes, Auffälligeres.)

In den Fokus geraten aber nur interaktive Elemente – img ist keins; a aber ist eins. Also dem a-Element die ID gegeben und dann:

<a href='Asien/Asien.html' id='Asien'>
  <img src='Bilder/Stecker.png' alt='Asien'>
  <div id='X'> Test </div>
</a>

#Asien:focus #X, #Asien:hover #X {display: block}

---

Auf die Idee, es in das title-attribut zu legen bin ich garnicht gekommen, kann mir es aber auch nicht vorstellen, wie und wieso ich es dorthin schreiben könnte, kannst du mir das vielleicht erklären?

<a href='Asien/Asien.html' title='Test'>
  <img src='Bilder/Stecker.png' alt='Asien'>
</a>

Aber der Tooltip erscheint ausschließlich bei Mausbenutzung. “If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute”, warnt Steve Faulkner

Das title-Attribut kann also nur für Informationen eingesetzt werden, die nicht unbedingt erforderlich sind. Dann stellt sich aber die Frage, warum man sie überhaupt für einige Nutzer anbieten sollte.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

mit einem "long touch" bekomme ich auf Android den title angezeigt.

Was es natürlich unter dem Strich nicht wirklich besser macht...

Oder, um die Spec zu zitieren:

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification

Das Problem ist nicht HTML, sondern die Umsetzung in den Browsern 🙁

Rolf

[Gunnar Bittersmann]

@@Rolf B

mit einem "long touch" bekomme ich auf Android den title angezeigt.

Etwas sinnlos, diese Funktion.

Ich halte mal meinen Finger auf Verdacht lange an eine Stelle, könnte ja sein, dass gerade dort ein Tooltip aufgeht. —kein Nutzer, jemals

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

kein Nutzer, jemals

sprich für dich selbst.

Bei Bildern mache ich das durchaus mal.

Rolf