Contao-Camp 2024
Ergebnis 1 bis 3 von 3

Thema: Bei hover einen eigenen Text einblenden

  1. #1
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard Bei hover einen eigenen Text einblenden

    Hallo zusammen,

    ich habe mit FontAwesome ein Info-Icon auf einer Webseite eingebunden zum Darstellen eines eigenen Textes. Mit hover möchte ich gerne den eigenen Text einblenden um Besuchern zusätzliche Informationen mitzuteilen. Ich habe irgendeinen Fehler noch, auf den ich im Augenblick aber nicht komme. Es funktioniert zwar "display:none;" noch aber der Hover-Effekt stellt sich nicht ein, wenn man mit der Maus auf das Icon fährt.
    Wer kann mir bitte helfen und mitteilen, wo hier mein Problem liegt?
    Anbei der von mir generierte Code.


    HTML-Code:
    <div class="ce_fontAwesomeIcon">
        <i class="fa fa-info-circle"></i>
        <span class="info_text">Hier der Text rein</span>
    </div>

    Code:
    span.info_text {
        display:none;
    }
    
    span.info_text:hover {
        display:block;
        background-color:#ffffe1
        border:1px solid #707070;
    }

    Danke!

    Gruß
    Thomas

  2. #2
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo,

    dein .info_text wird ja nicht angezeigt, also kann auch kein hover drüber funktionieren.
    Du kannst dein hover auf .ce_fontAwesomeIcon setzen
    Grüsse
    Bernhard


  3. #3
    Contao-Nutzer Avatar von JamesdK
    Registriert seit
    02.12.2009.
    Ort
    Leverkusen
    Beiträge
    162
    Partner-ID
    8753

    Standard

    Das hover muss doch aufs Icon gehen und nicht auf den versteckten Text.
    Und da es ein Geschwisterelement ist, was du einblenden möchtest, brauchst du den Sibling-Selektor ~.

    Also dann so:
    HTML-Code:
    i:hover ~ .info_text {
        display:block;
        background-color:#ffffe1
        border:1px solid #707070;
    }
    Ist aber ungetestet.

    Aber Vorsicht: der i-Selektor greift jetzt auf alle Icons in der Seite. Wenn du mehr davon hast, grenze den Selektor mit einer Klasse ein.

    Edit: Mist zu spät

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •