[CSS] Hover 2 Objekte verändern

**blackfreeze** · 25.06.2007 16:51

Hallo, ich möchte in einer Bilder-Gallerie folgendes erreichen, wenn mit der Maus über das kleine Bild gefahren wird sollen 1 <SPAN>-Ebenen (über gesamte Gallerie) erscheinen.
Mit Javascript ist das weniger das Problem, aber ich würde gerne auf Scripte verzichten, ist das mit CSS möglich?

in dem Beispiel soll sich beim RollOver auf dem 4. Bild die graue Box zeigen.

HTML-Code:

<html>
<head>
<LINK HREF="css.css" REL="stylesheet" TYPE="text/css">
</head>
<body>
<h1>Test-Gallerie</h1>
<span id="gallerie">
  <table border="1" width="400px" height="400px">
  <tr>
    <td width="100px"><img src="01.jpg" width="100px" height="100px" alt=""></td>
    <td width="50px">&nbsp;</td>
    <td width="100px"><img src="02.jpg" width="100px" height="100px" alt=""></td>
    <td width="50px">&nbsp;</td>
    <td width="100px"><img src="03.jpg" width="100px" height="100px" alt=""></td>
  </tr>
  <tr><td height="50px" colspan="5">&nbsp;</td></tr>
  <tr>
<!-- Hier ist das 4. Bild //--->
    <td><a href="" class="grau"><img src="01.jpg" width="100px" height="100px" alt=""></a></td>
    <td>&nbsp;</td>
    <td><a href="" id="link2"><img src="02.jpg" width="100px" height="100px" alt=""></a></td>
    <td>&nbsp;</td>
    <td><a href="" id="link3"><img src="03.jpg" width="100px" height="100px" alt=""></a></td>
  </tr>
  <tr><td height="50px" colspan="5">&nbsp;</td></tr>
  <tr>
    <td><img src="01.jpg" width="100px" height="100px" alt=""></td>
    <td>&nbsp;</td>
    <td><img src="02.jpg" width="100px" height="100px" alt=""></td>
    <td>&nbsp;</td>
    <td><img src="03.jpg" width="100px" height="100px" alt=""></td>
  </tr>
  </table>
</span>
<!-- Dieses Element soll eingeblendet werden //--->
<span class="grau" style="POSITION: absolute; TOP: 80px; LEFT: 20px; WIDTH: 400px; HEIGHT: 420px; VISIBILITY: hidden; BACKGROUND-COLOR: #C0C0C0; Z-INDEX: 2;">&nbsp;</span>
</body>
</html>

Code:

BODY {
  MARGIN: 20 0 0 20;
  BACKGROUND-COLOR: #FFFFFF;
  FONT-FAMILY: Verdana,Arial;
}

SPAN#gallerie {
  Z-INDEX: 1;
}

.grau:hover {
  VISIBILITY: visible; 
}

IMG {
  MARGIN: 0 0 0 0;
  BORDER: 0;
}

Habt ihr eine Idee?

EDIT

ich möchte gerne so einen Effekt erzeugen wie hier beim Abmelden,
Gallerie soll von der grau-Box überblendet werden und das eigentliche Bild soll nochmal in einer SPAN-Box darüber erscheinen.

**blackfreeze** · 27.06.2007 12:11

Schade ich habe auch keine andere Lösung gefunden...
deswegen habe ich die Sache etwas umgestaltet und zeige euch das Ergebnis (immernoch nicht komplett fertig

)

Firefox 1.5: works

IE 6.0: funktioniert zwar, aber Elemente werden teilweise nicht farbig hervorgehoben

andere Browser nicht getestet...

wenn jemand eine elegantere Art des css-Syntaxes vorschlagen möchte, bitte!

**Mich@el** · 28.06.2007 09:44

Moin blackfreeze.
Schaue Dir mal die "Demos - Photo galleries" auf CssPlay an.

Ist da etwas für Dich dabei?

Grüße
Michael

**blackfreeze** · 28.06.2007 14:12

Danke für den Tipp, informative Seite

aber der Endbenutzer mag die Art wie es ist, nur würde ich mich freuen wenn es unter dem IE auch noch so vollständig dargestellt wird

IE 7 auch selbes Problem :hover auf andere Elemente als A wid nicht anerkannt... also müsste ich den A-Tag um das SPAN bzw. LI machen oder???

**marc22** · 28.06.2007 15:21

IE 7 auch selbes Problem :hover auf andere Elemente als A wid nicht anerkannt

Eigentlich schon..

zur Startseite vom TP

Thema: [CSS] Hover 2 Objekte verändern

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

[CSS] Hover 2 Objekte verändern

Aktive Benutzer

Aktive Benutzer