Hover-Effekt

[Kevin]

Hallo,

ich möchte eine Infobox erstellen, die auftauchen soll, sobald man über eines der Bücher im Top fährt.
Es funktioniert weder das Mouse-Over, noch, dass die Infobox im Vordergrund zu sehen ist.
Das Buch ist ein DIV(class="top_cover"). In diesem befindet sich ein weiterer DIV(class="mo"), der für die Positionierung der Infobox da ist. Die Infobox besteht aus einer Tabelle innerhalb des Positionierungs-DIVs.

HTML-AUSSCHNITT:

<div class="top_cover" style="background-image:url(pics/c11/die_tochter_der_midgardschlange.jpg);">
                    <div class="mo" style="z-index:2;">

<table cellspacing="0" cellpadding="0">
<tr><td class="mobox_top"></td></tr><td class="mobox_main"><span class="motitle">Die Tochter der Midgardschlange</span><br /><p class="motext">Das Neue Hohlbein-Werk des berühmten
Fantasyautoren verspricht Spannung pur!</p><div class="mobox_uebergang"></div></td></tr><td class="mobox_bottom"></td></tr></table>

</span></div></div>

CSS-AUSSCHNITT:

/* MOBOX */

.top_cover .mo{
  margin:130px 0px 0px -107px;
  width:1000px;
  float:left;
  display:none;
}

top_cover .mo:hover{
  display:inline-block;
}

.mo:hover{
}

.mobox_top{
  background-image:url(pics/aufbau/mobox/top.png);
  width:320px;
  height:48px;
}
.mobox_main{
  background-image:url(pics/aufbau/mobox/main.png);
  width:294px;
  height:48px;
}

.mobox_bottom{
  background-image:url(pics/aufbau/mobox/bottom.png);
  width:320px;
  height:18px;
}

.mobox_uebergang{
  background-image:url(pics/aufbau/mobox/bottomuebergang.png);
  width:320px;
  height:23px;
}

Ich hoffe, dass mir da jemand weiterhelfen kann. Vielen Dank schonmal im vorraus!

[Joachim]

Hi,

.top_cover .mo{
  margin:130px 0px 0px -107px;
  width:1000px;
  float:left;
  display:none;
}

top_cover .mo:hover{
  display:inline-block;
}

mal so auf die schnelle, da ich grade keine Zeit für eine genauere Analyse habe... teste mal:

top_cover:hover .mo {
    display:inline-block;
}

Gruesse, Joachim

[Kevin]

@ Cheatah:
Die Infobox soll aufgehen, wenn man mit der Maus über das Buch fährt, welches im DIV mit der Klasse "top_cover" als Background-Image zu sehen ist.
Das Buch ist also immer Sichtbar und die Infobox soll darüber auftauchen.

@ Gunnar:
.top_cover ist die Mutterklasse von .mo weil in dem DIV mit der Klasse "top_cover" (dort ist das Buch zu sehen) sich der DIV "mo" befindet (der Positioniert die Tabelle, die die Infobox darstellt)

@Joachim:
Das hab ich schon testweise versucht. Damit ist die Infobox dauerhaft zu sehen. Allerdings wird sie noch immer von Objekten, die im Quellcode später folgen überdeckt..

[Matthias Apsel]

Om nah hoo pez nyeetz, Kevin!

@ Cheatah: Die Infobox soll aufgehen, wenn man mit der Maus über das Buch fährt, welches im DIV mit der Klasse "top_cover" als Background-Image zu sehen ist. Das Buch ist also immer Sichtbar und die Infobox soll darüber auftauchen.

du schreibst

top_cover .mo:hover

Damit willst du mo hovern, welches allerdings ausgeblendet ist.

Du solltest top_cover:hover .mo verwenden

@ Gunnar: .top_cover ist die Mutterklasse von .mo weil in dem DIV mit der Klasse "top_cover" (dort ist das Buch zu sehen) sich der DIV "mo" befindet (der Positioniert die Tabelle, die die Infobox darstellt)

Du hast einen Punkt vergessen, ich weiter oben auch. Du solltest keine Tabelle zum Layouten einer Infobox verwenden.

@Joachim: Das hab ich schon testweise versucht. Damit ist die Infobox dauerhaft zu sehen. Allerdings wird sie noch immer von Objekten, die im Quellcode später folgen überdeckt..

Weil durch den vergessenen Punkt das fehlerhafte CSS ignoriert wird.

siehe auch Ingos Infobox, etwas zu position und noch ein wenig ausführlicher, aber anders infobox.

Matthias

[Kevin]

Vielen Dank! Jetzt funktioniert es genau so wie ich es haben will.

[Cheatah]

Hi,

Das hab ich schon testweise versucht. Damit ist die Infobox dauerhaft zu sehen. Allerdings wird sie noch immer von Objekten, die im Quellcode später folgen überdeckt..
Weil durch den vergessenen Punkt das fehlerhafte CSS ignoriert wird.

streng genommen nicht, zumal es nicht fehlerhaft ist. Es gibt halt kein <top_cover>-Element, innerhalb dessen ein Element mit class="mo" o.ä. bestückt ist.

Cheatah

[Gunnar Bittersmann]

@@Kevin:

nuqneH

top_cover .mo:hover{

Es gibt kein Element vom *Typ* top_cover. Nun mach mal ’n Punkt!

Vielen Dank schonmal im vorraus!

Gerrn geschehen.

Qapla'

[Cheatah]

Hi,

.top_cover .mo{ [...]
  display:none;
}
top_cover .mo:hover{
  display:inline-block;
}

den von Gunnar genannten Punkt mal gedanklich ergänzt: Wie willst Du den Mauszeiger auf einem Element liegen haben, das ausgeblendet ist?

"Herr Kläger, Sie geben an, von einem Unsichtbaren überfallen worden zu sein. Sehen Sie die betreffende Person hier im Raum?"

Cheatah