Jana: Mit :hover einen Text einblenden

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 :)

  1. 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

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. @@Matthias Apsel

      Auf die ID-Selektoren solltest du auch verzichten.

      ?? Warum?

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

      --
      “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
      1. 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

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. @@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!

          --
          “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
  2. @@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!

    --
    “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
    1. 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.

      1. 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?

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

        Kein Problem, wir haben alle mal angefangen!

        Herzliche Grüße

        Matthias Scharwies

        --
        Ήταν διασκεδαστικό όσο κράτησε.
        Χρύσιππος ὁ Σολεύς, 220 π.Χ.
      2. @@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 Elementeimg 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!

        --
        “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
        1. 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

          --
          sumpsi - posui - obstruxi
          1. @@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!

            --
            “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
            1. Hallo Gunnar,

              kein Nutzer, jemals

              sprich für dich selbst.

              Bei Bildern mache ich das durchaus mal.

              Rolf

              --
              sumpsi - posui - obstruxi