Probleme mit :hover, wie kann ich auf ein anderes Element zugreifen

  • Guten Tag,


    ich habe folgende Frage:


    Ist es, und wenn ja, wie, möglich, innerhalb einer "Klammer" ein Attribut eines anderen Elements zu ändern? Konkret möchte ich folgendes machen. Ich habe eine Tabelle erstellt und möchte, wenn ich die Maus über eine Zeile halte, ein bestimmtes Bild, um welches es eben in der Zeile geht, sichtbar machen. Das Bild befindet sich bereits unter der Tabelle mit

    Code
    visibility: hidden;

    Ich habe jeder Zeile eine andere class gegeben und hab nun versucht das img folgendermassen anzusprechen:


    Code
    tablerow.class:hover{img.imgclass.visibility: visible;}

    aber das ist natürlich ein Syntax-fehler... mache ich etwas falsch oder gehe ich an die Sache falsch heran? Wäre cool wenn ihr mir helfen könntet :)


    Mit freundlichen Grüßen

    Mauron

  • Funktioniert irgendwie nicht. Mein img hat auch eine class, muss ich dann nicht

    Code
    tablerow.rowclass:hover > img.imgclass{visibility: visible;}

    machen? So funktioniert es aber auch nicht :'D Komme irgendwie nicht weiter. Sollte vielleicht hinzufügen dass ich kein html verwende sondern ausschließlich xml.

  • probier es mal so

    Code
    .(ZeilenClassName):hover img{visibility: visible;}

    Ohne runde klammern und Punkt davor nicht vergessen

    wenn das nict geht

    dann zeig doch mal dein ganzen code

  • probier es mal so

    Code
    .(ZeilenClassName):hover img{visibility: visible;}

    Ohne runde klammern und Punkt davor nicht vergessen

    wenn das nict geht

    dann zeig doch mal dein ganzen code

    Also da werden mir dann mehrere Syntaxfehler angezeigt von Visual Studio Code und funktionieren tut es auch nicht.


    das img ist eben im Wurzeltag ganz normal drin, mit css richtig positioniert aber even hidden, und über dem Bild habe ich eine Tabelle und ich möchte wenn ich mit der Maus über eine bestimmte Zeile gehe eben dass das Bild sichtbar wird...

    Meine xml-Datei sieht wie folgt aus:

    XML
    <wurzeltag>
        <tabelle>
            <zeile class="classname">
                <spalte>Text</spalte>
            </zeile>
        </tabelle>
        <img src="quelle.png" alt="bild" class"imgclass"/>
    </wurzeltag>

    und die CSS datei wie folgt:


    CSS
    wurzeltag{display: flex; justify-content: center; width: 100%; background: url("bild.png"); background-attachment: fixed; background-size: cover;}
    tabelle{display:table; width: 70em; position: absolute; top: 5.2em; border: 2px solid black; border-collapse: separate; border-spacing: 0.5em;}
    zeile{display: table-row; background-color: rgb(131, 174, 132);}
    spalte{display: table-cell; text-align: center; vertical-align: middle;}
    zeile:hover{background-color: white; color: black;} /*um zu highlighten in welcher zeile man ist*/
    img.imgclass{padding-top: 27em; position: absolute; width: 900px; height: 640px; visibility: hidden;}
    /*hier würde dann sowas stehen wie zeile.rowclass:hover > img.imgclass{visibility: visible;} */
  • zeile 7 fehlt bei class"imgclass"/> ein "=" zeichen


    also so muss es sein

    Code
    <wurzeltag>
        <tabelle>
            <zeile class="classname">
                <spalte>Text</spalte>
            </zeile>
        </tabelle>
        <img src="quelle.png" alt="bild" class="imgclass"/>
    </wurzeltag>

    so klappt es dann auch

    https://jsfiddle.net/basti1012/9vg7eywt/8/

    Das hier ist ja nicht mein wirklich Code, sondern nur eine vereinfachte Darstellung um nicht mit meinem Inhalt zu verwirren bzw abzulenken. Das = hab ich in meinem Code natürlich und war somit nur ein kleiner Rechtschreibfehler. Bei mir funktioniert es trotzdem nicht...

  • Funktioniert irgendwie nicht. Mein img hat auch eine class, muss ich dann nicht

    Code
    tablerow.rowclass:hover > img.imgclass{visibility: visible;}

    machen? So funktioniert es aber auch nicht :'D Komme irgendwie nicht weiter. Sollte vielleicht hinzufügen dass ich kein html verwende sondern ausschließlich xml.

    Nein! Du kannst ein Element nicht doppelt ansprechen, das führt zu Fehlern. Wenn Du einem Element eine Klasse, oder ID gibst, dann schreibst Du nur die ID, oder die Klasse auf.


    Code
    <div class="klasse">
    </div>
    
    /* CSS richtig: */
    
    .klasse { background-color: black; }
    
    /* So ist es falsch: */
    
    div.klasse { background-color: black; }

    Darf ich mal deinen Code sehen? Du kannst ihn auf JSfiddle.net einfügen und den Link schicken!

  • Lasse ich das Bild tatsächlich durch wurzeltag:hover sichtbar werden, funktioniert es auch. Ich möchte aber dass es NUR sichtbar wird, wenn man mit der Maus über die Zeile mit der entsprechenden Klasse fährt.

  • Huch, XHTML, tschuldigung, damit kenne ich mich leider nicht aus!



    Nein! Du kannst ein Element nicht doppelt ansprechen, das führt zu Fehlern. Wenn Du einem Element eine Klasse, oder ID gibst, dann schreibst Du nur die ID, oder die Klasse auf.

    Vergiss das! Ist in Bezug auf XHTML wahrscheinlich falsch. Ich hätte mich in dieses Thema gar nicht erst einmischen dürfen, ich gebe wieder über an die anderen Forenkollegen!


    XHTML ist nicht wirklich oft genutzt, daher empfiehlt es sich, direkt am Anfang zu erwähnen, dass sie der Thread darüber handelt.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!