Tabellenzeile soll bei hover eine infobox anzeigen

[theatermacher]

@@theatermacher:

nuqneH

@gunther

Damit mein Ziel deutlicher wird, hier der Link zu meiner Testseite:
http://uedlige.dramatik.ch
Die Funktionen der Zellen in der Kolonne Whg.-Nr. sollen über die ganze Zeile gehen. Also, egal in welche Zelle in der Zeile ich hovere, soll sich die Infobox öffnen. Und egal wo ich in der Zeile hinklicke soll das entsprechende Dokument geöffnet werden.

Dein Ziel ist schon klar, nur dein Weg der Umsetzung nicht ...! ;-)

Zunächst einmal darf eine ID nur _einmal_ pro HTML vorkommen (td id="box").
Und die Klasse "infobox" wäre bei den jeweiligen DIV_Elementen ggf. auch hilfreicher, als bei den TDs.

Im Augenblick blendest du die DIVs mit den Bildern ja über #box:hover div {...} ein. Abgesehen von der falschen Mehrfachverwendung der ID. ist #box aber ein TD-Element. Und wie ich schon geschrieben habe, willst du ja nicht eine einzelne Tabellenzelle (TD) als Auslöser, sondern die Tabellenreihe (TR). Ergo tr:hover .infobox {...} (wenn die DIV-Elemente die Klasse "infobox" bekommen haben).

Gruß Gunther

Hallo Gunther

Danke für Deine Antwort.

Zunächst einmal darf eine ID nur _einmal_ pro HTML vorkommen (td
id="box").

Viel schäm!
Ich hoffe, Dein Hinweis mit tr:hover .infobox {...} klappt. Ich werde es umgehend ausprobieren.

LG Harry

Ich bin's nochmal. Ich habe mal die #box in .box geändert. es funktioniert weiterhin.
Dann wollte ich die Funktion auf die Tabellenzeile anwenden. Es geht aber nicht.

tr.box{  
height:18px;  
width:100%;  
padding:0;  
margin:0px;  
border:0px solid red;  
/*font:bold 14px verdana, sans-serif; */  
}  
  
tr.box div{display:none;}  
  
tr.box:hover div{  
display:block;  
width:300px;  
height:550px;  
position:absolute;top:200px;left:0px;  
border:0px dashed black;  
padding:0px;  
font:normal 14px verdana, sans-serif;  
z-index:9910;  
}  
tr:hover {  
background:#abcde5;  
}  
tr.infobox {  
background:#abcde5;  
}  
  
tr.infobox:hover {  
background:#64a8d7;  
color:#fff;  
}

<tr class="evenrow box infobox"><a href="http://uedlige.dramatik.ch/media/pdf/Dok1.pdf">&nbsp;</a>  
            <div><img width="330" height="550" alt="infobox" src="http://uedlige.dramatik.ch/media/hoverbox/hoverbild-2.jpg" /></div>  
            <td class="leer">&nbsp;</td>  
            <td>1.5</td>  
            <td>Attika</td>  
            <td>5.5</td>  
            <td>179m2</td>  
            <td>100m2</td>  
            <td>12m2</td>  
            <td>1'750'000.00</td>  
            <td>verkauft</td>  
        </tr>

Liegt wahrscheinlich daran, dass dass schliessende Tag </tr> erst nach der letzten Tabellenzelle kommt.

Rein theoretisch könnte ich ja den Code den ich vorher auf die Zelle "Whg--Nr." angewandt hatte, in jede Zelle einbauen. Aber das würde bei 50 Zeilen à 8 Zellen einen recht aufgeblähten Code ergeben.

Tabellen treiben mich in den Wahnsinn ;-)

LG Harry