+ Antworten
Ergebnis 1 bis 4 von 4

Thema: Ein CSS-Problem (hoover zweier Elemente)

  1. #1
    War schon öfter hier
    Registriert seit
    16.09.2005
    Beiträge
    129
    Bedankte sich
    36
    1 Danksagung in 1 Beitrag

    Standard Ein CSS-Problem (hoover zweier Elemente)

    Hallo Community,

    ich suche mir schon eine Stunden den Wolf und vielleicht hat von Euch jemand einen Tipp für mich.
    Ich bastele gerade an einem Joomla Template. Ich habe in einem div ein Bild und daneben in einem anderen div eine Headline.
    Gehe ich auf das Bild, soll sich dieses UND die Headline verändern (hoover). Geht man auf die Headline, soll auch das Bild hoovern.

    Quellcode

    HTML-Code:
    <div class="hover">
    <div class="col-lg-4"><a class="hover"><img class="LINK ZUM BILD" src="http://www.joomlaportal.de/images/layout/img-dummy01.jpg" alt="NAME" /></a></div>
    <div class="col-lg-8"><h2><a class="hover">Ich bin die Headline</a></h2>
    </div>
    </div>
    Das derzeitige CSS:

    HTML-Code:
    .img-kategorien {border-top:18px solid #a9a8a6;}
    .hover:hover .img-kategorien {border-top:18px solid #00677f;}
    h2 {font-family: Cambria, Georgia, serif; font-size: 16pt; font-weight: 700; margin: 10px 0 5px 0!important;}
    Wenn ich über die Headline gehe, hoovert auch das Bild (oberer Balken wird grün), aber wen ich über das Bild gehe, hoovert die Headline nicht ebenso.
    Ich habe einen Knoten im Hirn. Kann mir jemand einen Tipp geben - bitte.

    Danke im Voraus,
    Gersh
    Geändert von gershwin (23.04.2019 um 15:04 Uhr)

  2. #2
    Verbringt hier viel Zeit Avatar von Dudlhofer
    Registriert seit
    11.02.2009
    Ort
    da wo Bayern am schönsten ist
    Beiträge
    677
    Bedankte sich
    33
    Erhielt 221 Danksagungen
    in 184 Beiträgen

    Standard

    Ich sehe in Deinem Beispiel nicht, dass die Klasse .img-kategorien gesetzt ist - im CSS verknüpfst Du die aber mit der .hover-Klasse.

    ♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦ EXTRA BAVARIAM NULLA VITA ♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦


  3. Erhielt Danksagungen von:


  4. #3
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    6.283
    Bedankte sich
    144
    Erhielt 2.365 Danksagungen
    in 2.223 Beiträgen

    Standard

    Hier ein Beispiel wie man es macht: https://codepen.io/yying6/pen/FvGtz
    Geändert von FINWICK (18.04.2019 um 23:43 Uhr)
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Suport via PN

  5. Erhielt Danksagungen von:


  6. #4
    War schon öfter hier
    Registriert seit
    16.09.2005
    Beiträge
    129
    Bedankte sich
    36
    1 Danksagung in 1 Beitrag

    Standard

    Danke FINWICK für den Tipp. Hat funktioniert.

+ Antworten

Berechtigungen

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