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

visibility: hidden;

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

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

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.

Zitat von basti1012

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:

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

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;} */

Zitat von basti1012

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

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.

https://jsfiddle.net/fgwxyavs/2/

Hab alles was nicht zu dieser Datei gehört mal aus css entfernt, die xml datei ist komplett und ja ich hoffe das hilft irgendwie