Eine Liste in einer Zelle über Hover erstellen

**Dean** · 09.01.2023 20:37

Guten Abend Leute

Ich bin dabei und habe auch mal angefangen programmieren zu lernen. Momentan bin ich noch frisch drin, habe mich auch bisschen bei Seiten wie w3schools umgeguckt. Ich zeige euch mal ein Screenshot. Nicht wundern, was ihr da sieht. Ist nur zum Testen für mich gedacht, also hat nichts von großer Bedeutung, was alles im screenshot ist. Ist alles mit dem Spiel Gothic verbunden

[Bild: wogimage.PNG]

Mein Ziel ist es, dass ich, wenn ich mit meiner Maus über eine Spalte bewege, dass sich automatisch eine Liste darunter öffnet, wie zb bei "meine besten Freunde", dass eine Liste mit den ganzen Namen von den Freunden von des namenlosen Helden stehen, zb bei Zeile 1 der Name A, bei Zeile . Das wäre mein nächstes erstes Ziel. Nur leider weiß ich nicht genau, wie ich des hinkriege. Und wenn ich mit meiner Maus von der Spalte wegbewege, dass sich die Liste automatisch schließt. Ich habe zwar gegoogelt, aber nichts finden können.

Das wäre mein HTML Code soweit:

HTML-Code:

<head>
    <meta charset="utf-8">
<link rel="stylesheet" href="tableproject.css">
    <title>Meine Startseite</title>
  </head>
  <body>
    <center><h1>Meine Startseite</h1></center>

  <table style="width:100%">
  <tr>
    <td>Über mich</td>
    <td>Meine besten Zitate</td>
    <td>Meine besten Freunde</td>
    <td>Meine Lieblingsorte</td>
    <td>Meine Lieblingswaffen</td>
    </tr>
    </table>
<br>
  <br>
    <br>

<center><img src="heroavatar.png" width="300px"></center>


<h1>Über mich</h1>

<center>Einst war ich ein Gefangener in der Kolonie. Mein Abenteuer fing in einem Lager voller Buddler, Schatten und Gardisten. Meine Reise ging aber weiter... das neue Lager, ein Lager voller Schurken und Banditen... und auch ein Sektenlager... bis zum Tempel des Bösen.</center>


  </body>

Ich hoffe, ihr wisst was ich meine

wie gehe ich weiter vor? Oder gibt es Link zu sowas, was mir erklären kann?

Mit freundlichen grüßen

**Multithread** · 09.01.2023 20:57

Ich glaube, was du suchst, ist das CSS Item ":hover".

Das ermöglicht es dir, mehr Elemente einzublenden, wenn auf deinem Item ein Hover ist.

z.b.

Code:

<td class="nav-item">Meine besten Zitate<div class="nav-sub">Subtext</div></td>

<style>
.nav-item :not(:hover) {
.nav-sub{
display:none;
}}
</style>

Ich bin mir nicht sicher ob der Code genau so Funktioniert, aber eigentlich sollte der dafür sorgen dass der Subtext ausgeblendet ist, solange du nicht über dem TD Item hoverst.

Du kannst dir noch Frameworks wie Bootstrap anschauen, welche es einfacher machen aktuelle best-practice zu verwenden und viele der kleineren über der Errstellung von HTML Seiten reduzieren.

**Dean** · 09.01.2023 21:18

Zitat von Multithread

Ich glaube, was du suchst, ist das CSS Item ":hover".

Das ermöglicht es dir, mehr Elemente einzublenden, wenn auf deinem Item ein Hover ist.

z.b.

Code:

<td class="nav-item">Meine besten Zitate<div class="nav-sub">Subtext</div></td>

<style>
.nav-item :not(:hover) {
.nav-sub{
display:none;
}}
</style>

Ich bin mir nicht sicher ob der Code genau so Funktioniert, aber eigentlich sollte der dafür sorgen dass der Subtext ausgeblendet ist, solange du nicht über dem TD Item hoverst.

Du kannst dir noch Frameworks wie Bootstrap anschauen, welche es einfacher machen aktuelle best-practice zu verwenden und viele der kleineren über der Errstellung von HTML Seiten reduzieren.

Klasse, ich danke dir. Ich schaue mich einfach nochmal genauer um, vielleicht entdecke ich noch was neues, was ich einbauen könnte, aber habe es testweise angegeben und hat geklappt

Eine Liste in einer Zelle über Hover erstellen

Themen-Optionen

Eine Liste in einer Zelle über Hover erstellen

Berechtigungen