Homepage selbermachen 7.851 Themen, 35.615 Beiträge

Verfolgung starten Optionen

Div oder span über Bild einblenden mit :hover

hansapark / 8 Antworten / Baumansicht Nickles

Hallo.

Ich habe gefloatete divs, die eine Galerie ergeben. In jedem div ist ein thumbnail-Bild.
Wie kann ich am einfachsten erreichen (mit CSS) dass bei MouseOver-Bild rechts oben in der Ecke meines Bildes ein kleines div (oder z.b. ein span)  erscheint? Also über dem Bild.

(so ähnlich wie bei facebook)

Alles was ich probiert habe ist gescheitert.

Wie kann man da generell herangehen?

Vielen Dank. weiß nicht mehr weiter
h.

bei Antwort benachrichtigen
Zaphod hansapark „Div oder span über Bild einblenden mit :hover“
Optionen

Mit :hover kannst du nur das angezeigte Element selbst manipulieren, nicht ein anderes.
Wenn du divs erscheinen lassen willst, musst du diese mit display:none oder visibility:hidden unsichtbar machen und diese EIgenschaft per JavaScript bei onmouseover umschreiben ...

Ein anderer Ansatz ohne JavaScript wäre, über das Backgroud-Element der angezeigten DIV zu arbeiten, dann könntest du bei :hover ein modifiziertes Bild einblenden ...

Ich kann nur aus deiner Beschreibung nicht entnehmen, ob das in dem von dir beschriebenen Fall das Gewünschte ergibt ...

HTH, Z.

bei Antwort benachrichtigen
Borlander Zaphod „Mit :hover kannst du nur das angezeigte Element selbst manipulieren, nicht ein...“
Optionen

Wäre das nicht auch wie folgt möglich?

div.aussen div.innen {
  display:none;
}
div.aussen:hover div.innen {
  display:block;
}

Oder übersehe ich da etwas?


Gruß
bor

bei Antwort benachrichtigen
hansapark Borlander „Wäre das nicht auch wie folgt möglich? div.aussen div.innen display:none...“
Optionen

Hallo.

So in der Art hatte ich es auch probiert, aber irgendwie ging es nicht.
Hier mal zwei Bilder zum zeigen was ich vor hatte:








ich probiere es mal mit javascript, da ich sowieso js verwende auf der seite.

thx

h.

bei Antwort benachrichtigen
Borlander hansapark „Hallo. So in der Art hatte ich es auch probiert, aber irgendwie ging es nicht....“
Optionen

Also bei mir funktioniert es damit:

<html>
<head>

<style>
<!--

div.aussen {
 border: 1px solid red;
 width: 200px;
 height: 200px;
}

div.aussen div.innen {
  display:none;
  background-color: #999;
}
div.aussen:hover div.innen {
  display:block;
}

//-->
</style>

</head>
<body>


<div class="aussen">
 <div class="innen">Text</div>
</div>

<div class="aussen">
 <div class="innen">Text</div>
</div>

<div class="aussen">
 <div class="innen">Text</div>
</div>

<div class="aussen">
 <div class="innen">Text</div>
</div>

</body>
</html>

bei Antwort benachrichtigen
hansapark Borlander „Also bei mir funktioniert es damit: Text Text Text Text “
Optionen

Hallo.

Ja , jetzt geht es bei mir auch .
Bleibt nur das Problem, dass das div.innen über das Bild muss.

Im moment schiebt es den div-inhalt nach unten.
z-index scheint nicht zu greifen, und position:absolute ist glaube nicht geeignet, da es auf so viele Bilder angewendet werden soll.

gibts da noch eine möglichkeit? ein layer oder irgendwie sowas?

vielen dank
h.

bei Antwort benachrichtigen
Borlander hansapark „Hallo. Ja , jetzt geht es bei mir auch . Bleibt nur das Problem, dass das...“
Optionen
und position:absolute ist glaube nicht geeignet, da es auf so viele Bilder angewendet werden soll.
position:absolut; sollte es tun...
bei Antwort benachrichtigen
hansapark Borlander „ position:absolut sollte es tun...“
Optionen

hallo.

ich habe es hinbekommen.

habe dem eltern-element (div) nach seinem float noch ein position:relative hinzugefügt und in diesem div ein neues div erstellt mit position:absolute. welches dann mit display:none und display:block verschwindet und erscheint.

ich glaube das war der haken, dass das eltern-div kein relative hatte.


vielen dank.
h.

bei Antwort benachrichtigen
xafford hansapark „hallo. ich habe es hinbekommen. habe dem eltern-element div nach seinem float...“
Optionen
ich glaube das war der haken, dass das eltern-div kein relative hatte.

Eine kleine Erläuterung hierzu: Ja, Du hast Recht, das Verhalten von position ist teilweise gewöhnungsbedürftig. Ein position:relative bewirkt, dass ein Element relativ zu seiner eigentlichen Position auf dem Bildschirm (also der die es ohne Manipulation hätte) ausgerichtet wird. Notiert man also ein position:relative und ein top:10px, so wird das Element 10 Pixel tiefer angezeigt, als es ohne diese Angabe angezeigt würde.

Im Gegensatz hierzu bewirkt position:absolute (wie der Name schon sagt) eine absolute Positionierung mit den Positionsangaben. Ein Element mit position:absolute und top: 10px wird also unabhängig von seiner eigentlichen Positionierung auf dem Bildschirm bei 10 Pixeln von oben angezeigt.

Der Fallstrick hierbei ist jedoch der Bezugspunkt. Bei position:relative ist dieser recht einfach, da er irrelevant ist, denn das Objekt ändert seine Position immer um den angegeben Wert zu seiner ursprünglichen Position. Tricky wird es bei position:absolute, denn hier ist das Bezugssystem wichtig. Der Nullpunkt für die Verschiebung ist immer das erste positioniert Elternelement. Gibt es kein positioniertes Elternelement, so ist der Bezugspunkt das Browserfenster.

Will ich also, dass ein Kindelement in der linken oberen Ecke seines Elternelementes erscheint, so muss ich dafür sorgen, dass das Elternelement positioniert ist um als Bezugspunkt zu dienen. Deswegen muss das Elternelement eine Pseudo-Positionierung erhalten (mit position:relative) und das Kind absolut hierzu positioniert werden.

Eine weitere Anmerkung noch: Die Pseudoklasse :hover wird nicht von jedem Browser bei jedem HTML-Element unterstützt.. Ein div:hover funktioniert also nicht überall (Gruß an unseren Lieblingsbrowser IE
Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen